如何將一個元素與另一個元素正下方直接對齊？

我正在尋找一個「時鐘」元素（5對一行）的網格，每一個下面都有一個DAY和DATE，以時鐘爲中心（一行中的日期，日期正下方）。我是新來的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（）簡單地設置日期的「天」和「日期」的ID。這裏是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寬和高）在彼此之間維持012px70px。

什麼是要達到這兩個目標的最好方法是什麼？

來源

2016-06-20 lgzambello

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：

定義包裝爲內聯塊，添加你想要的距離邊緣。定義所有包括的元件塊，其在包裝的中心（並在同一時間水平中心彼此對準）由margin: 0 auto：

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

從其他CSS規則擦除現在不必要的東西

來源

2016-06-20 19:55:10 Johannes

這是我需要的。非常感謝你 – lgzambello

對於目標1： 每個時鐘都應包含在一個塊中。把它們想象成組件，好嗎？然後使用其容器的100％寬度（默認情況下，只要每個時鐘位於容器中，不必設置它）將中間的文本與它們的段落對齊。

目標2： 浮法您的時鐘（字面float: left;）它會工作，而他們有一個width集。

來源

2016-06-20 19:47:32 SparK

如何將一個元素與另一個元素正下方直接對齊？

回答

相關問題