Как я могу горизонтально выровнять элемент с другим элементом непосредственно под ним?

Question

Я ищу, чтобы создать сетку «часов» элементов (5 к линии), с Днем и ДЕЙСТВОМ прямо под каждым, с центром в часах (день на одной строке, дата прямо под ним). Я новичок в html/css, так что медведь со мной. В настоящее время для первой линии 5 часов, у меня есть:

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

где Clock.getDates() просто устанавливают даты для «дня» и «дата» идентификаторов. Вот CSS У меня есть для них:

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

• Цель 1: Есть линии 5 часов (видели выше, как «круговые диаграммы»), где две строки текста под каждые часы центрируются относительно до часы.

• Цель 2: иметь пять часов (150px широкий и высокий) поддерживать 70px между eachother.

Каков наилучший способ достичь этих двух целей?

Answer 1

1.) Поместите компоненты для каждого такта в обертку:

<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 обертки, как инлайн-блоки, добавление полей, которые вы хотите для расстояний. Определить все включенные элементы, как блоки, которые сосредоточены в обертке (и в то же время по горизонтали выровнен по центру друг с другом) с помощью margin: 0 auto:

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

Стереть Теперь ненужные вещи из других правил CSS

Answer 2

Для цели 1: Каждый такт должен содержаться в блоке. Думайте о них как о компонентах, хорошо? И затем выровняйте тексты в центре с их абзацами, используя 100% ширину их контейнера (это по умолчанию, вам не нужно устанавливать его, пока каждый таймер находится в контейнере).

Для цели 2: Поплавка ваших часов (в буквальном смысле float: left;) он будет работать, пока у них есть width набора.