對齊垂直中間的一個div

我想要我的紅色矩形在數字中間，爲此我添加了一個包裝div與樣式display:table和box div樣式爲display:table-cell, vertical-align:middle。以下是我的HTML對齊垂直中間的一個div

<div class="repeat_div" style="border-right: 0px solid rgb(158, 158, 158); padding: 0px 15px; float: left;"> 
 
    <div class="topLabel" style="margin-left: 25px; font-size: 12px; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; text-transform: none; color: rgb(158, 158, 158); background-color: transparent;"><span>Youtube Top</span></div> 
 
    <div class="boxStatsContainer" style="float: left;"> 
 
    <div style="float: left; display:table"> 
 
     <div class="box" style="float: left; background-color: rgb(235, 134, 79); width: 15px; height: 20px; display:table-cell; vertical-align:middle"></div> 
 
    </div> 
 
    <div class="stats" style="font-size: 48px; float: left; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; text-transform: none; color: black;"><span style="margin-left: 10px;">$620</span></div> 
 
    </div> 
 
    <div class="bottomLabel" style="font-size: 10px; margin-left: 25px; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; text-transform: none; color: rgb(158, 158, 158);"><span>Youtube</span></div> 
 
</div>

但紅色框是不是在中間

來源

2017-10-16 ozil

我用display: table-cell和vertical-align : middle，使其工作。

<div class="repeat_div" style="border-right: 0px solid rgb(158, 158, 158); padding: 0px 15px; float: left;"> 
 
    <div class="topLabel" style="margin-left: 25px; font-size: 12px; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; text-transform: none; color: rgb(158, 158, 158); background-color: transparent;"><span>Youtube Top</span></div> 
 
    <div class="boxStatsContainer" style="float: left;"> 
 
    <div style="float: none; display:table-cell;vertical-align:middle;"> 
 
     <div class="box" style="float: left; background-color: rgb(235, 134, 79); width: 15px; height: 20px; display:table-cell; vertical-align:middle"></div> 
 
    </div> 
 
    <div class="stats" style="font-size: 48px; float: none;display: table-cell; vertical-align: middle; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; text-transform: none; color: black;"><span style="margin-left: 10px;">$620</span></div> 
 
    </div> 
 
    <div class="bottomLabel" style="font-size: 10px; margin-left: 25px; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; text-transform: none; color: rgb(158, 158, 158);"><span>Youtube</span></div> 
 
</div>

來源

2017-10-16 08:41:41

您可以嘗試使用display: flex; align-items: center您boxStatsContainer div元素;

<div class="repeat_div" style="border-right: 0px solid rgb(158, 158, 158); padding: 0px 15px; float: left;"> 
 
    <div class="topLabel" style="margin-left: 25px; font-size: 12px; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; text-transform: none; color: rgb(158, 158, 158); background-color: transparent;"><span>Youtube Top</span></div> 
 
    <div class="boxStatsContainer" style="float: left; display: flex; align-items: center;"> 
 
    <div style="float: left; display:table"> 
 
     <div class="box" style="float: left; background-color: rgb(235, 134, 79); width: 15px; height: 20px; display:table-cell; vertical-align:middle"></div> 
 
    </div> 
 
    <div class="stats" style="font-size: 48px; float: left; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; text-transform: none; color: black;"><span style="margin-left: 10px;">$620</span></div> 
 
    </div> 
 
    <div class="bottomLabel" style="font-size: 10px; margin-left: 25px; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; text-transform: none; color: rgb(158, 158, 158);"><span>Youtube</span></div> 
 
</div>

來源

2017-10-16 08:43:59

給了中心display:inline-block和vertical-align:middle。

<div class="repeat_div" style="border-right: 0px solid rgb(158, 158, 158); padding: 0px 15px; float: left;"> 
 
    <div class="topLabel" style="margin-left: 25px; font-size: 12px; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; text-transform: none; color: rgb(158, 158, 158); background-color: transparent;"><span>Youtube Top</span></div> 
 
    <div class="boxStatsContainer" style="float: left;"> 
 
    <div style="display: inline-block; vertical-align:middle"> 
 
     <div class="box" style=" float:left;background-color: rgb(235, 134, 79); width: 15px; height: 20px; display:table-cell; vertical-align:middle"></div> 
 
    </div> 
 
    <div class="stats" style="font-size: 48px; display: inline-block; vertical-align:middle; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; text-transform: none; color: black;"><span style="margin-left: 10px;">$620</span></div> 
 
    </div> 
 
    <div class="bottomLabel" style="font-size: 10px; margin-left: 25px; font-family: Arial; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; text-transform: none; color: rgb(158, 158, 158);"><span>Youtube</span></div> 
 
</div>

來源

2017-10-16 08:44:11

對齊垂直中間的一個div

回答

相關問題