I want to create a grid of "clock" elements, with five clocks in each row. Below each clock, I'd like to display the DAY and DATE centered with the clock (day on top line, date below). Since I'm new to html/css, I appreciate your patience. Here's what I have so far for the first line of 5 clocks:
<div class="clock">
<h4><canvas id="piechart0" width="150" height="150"></canvas></h4>
<h4><canvas id="piechart1" width="150" height="150"></canvas></h4>
<h4><canvas id="piechart2" width="150" height="150"></canvas></h4>
<h4><canvas id="piechart3" width="150" height="150"></canvas></h4>
<h4><canvas id="piechart4" width="150" height="150"></canvas></h4>
<div class="date" id="day0"></div>
<div class="date" id="day1"></div>
<div class="date" id="day2"></div>
<div class="date" id="day3"></div>
<div class="date" id="day4"></div>
<div class="date1" id="date0"></div>
<div class="date1" id="date1"></div>
<div class="date1" id="date2"></div>
<div class="date1" id="date3"></div>
<div class="date1" id="date4"></div>
<script>
Clock.getDates();
</script>
The Clock.getDates() function populates the dates for the "day" and "date" id's. Here is the CSS styling for these elements:
h4 {
padding-left: 70px;
padding-top: 0px;
float: left;
margin: 15px 0px 0px 0px;
}
.clock {
text-align: left;
padding: 0px 0px 0px 0px;
}
.date {
display: inline;
padding-left: 0px;
color: white;
margin-left: 120px;
font-weight: bold;
}
.date1 {
display: inline;
padding-left: 10px;
color: white;
}
canvas {
padding-top: 0px;
display: inline;
margin-left: auto;
margin-right: auto;
left: 25%
}
Goal 1: Create rows of 5 clocks where the two lines of text beneath each clock are centered.
Goal 2: Ensure the five clocks (each 150px wide and tall) maintain a distance of 70px between them.
What would be the best approach to achieve these objectives?