lgzambello lgzambello - 5 months ago 9
CSS Question

How can I horizontally align an element with another element directly beneath it?

I am looking to make a grid of "clock" elements (5 to a line), with a DAY and DATE directly beneath each one, centered with the clock (day on one line, date right below it). I am new to html/css so bear with me. Currently, for the first line of 5 clocks, I have:

<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>




where Clock.getDates() simply sets the dates for the "day" and "date" id's.
Here is the CSS I have for these:

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: Have lines of 5 clocks (seen above as "piecharts") where the
    two lines of text underneath each clock is centered with respect to
    the clock.

  • Goal 2: Have the five clocks (150px wide and tall) maintain
    70px between eachother.



What is the best way to reach these two goals?

Answer

1.) Put the components for each clock into a wrapper:

<clock>

<div class="clockwrapper">
  <h4><canvas id="piechart0" width="150" height="150"></canvas></h4>
  <div class="date" id="day0"></div>
  <div class="date1" id="date0"></div>
</div>
<div class="clockwrapper">
  <h4><canvas id="piechart1" width="150" height="150"></canvas></h4>
  <div class="date" id="day1"></div>
  <div class="date1" id="date1"></div>
</div>
<div class="clockwrapper">
  <h4><canvas id="piechart2" width="150" height="150"></canvas></h4>
  <div class="date" id="day2"></div>
  <div class="date1" id="date2"></div>
</div>
<div class="clockwrapper">
<h4><canvas id="piechart3" width="150" height="150"></canvas></h4>
  <div class="date" id="day3"></div>
  <div class="date1" id="date3"></div>
  </div>
<div class="clockwrapper">
  <h4><canvas id="piechart4" width="150" height="150"></canvas></h4>
  <div class="date" id="day4"></div>
  <div class="date1" id="date4"></div>
</div>

</div>

2.) CSS:

Define the wrappers as inline-blocks, adding the margins you want for distances. Define all the included elements as blocks which are centered in the wrapper (and at the same time horizontally center-aligned to each other) by margin: 0 auto:

.clockwrapper {
  display: inline-block;
  margin: 35px 0;
  width: 150px;
  height: 150px;
}
.clockwrapper > * {
  display: block;
  margin: 0 auto;
}

Erase the now unnecessary stuff from the other CSS rules

Comments