As someone new to web development, I'm exploring ways to shift text within a div element without altering the size of the div itself. Padding was my initial approach, but it caused alignment issues with other text (such as moving down the Activity Log).
The goal is to center-align the text beneath "Current Status" and emphasize only the text "Current Status" and "Activity Log" in bold, leaving the rest unbolded.
$(function updat() {
// code here
});
$(function dat() {
// another function here
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src= "Ag.js"></script>
<div id="light" style="min-width: 310px; height: 200px; left:10px"></div>
<div id="temp&humid" style="min-width: 310px; height: 200px; left:10px"></div>
<div id="stacked"> </div>
<div id="parentContainer" style="margin-left:400px; width: 200px; margin-top: -20%" >
<div id="currentSatus"><center><b>Current Status<b><center></div>
<br>
<div id="temp" style=" background: #72D923;height: 50px"><font face='verdana'><center>Temperature<center></font> </div>
<div id="hum" style="background: red; height: 50px"><font face='verdana'><center>Humidity<center></font></div>
<div id="water" style="background:#72D923; height: 50px "><font face='verdana'><center>Water</center></font></div>
<div id="ligh" style="background: red; height: 50px"><font face='verdana'><center>Light</center></font></div>
</div>
<div class=" activ" id="log" style="margin-left: 600px; text-align: center; margin-top: -18.5%"><center>Activity Log</center> </div>