CSS垂直對齊：中不起作用

CSS：CSS垂直對齊：中不起作用

.wrap { 
    width: 100%; 
    display: table; 
    height:100px; 
} 
.wrap tr { 
    width:30%; 
    text-align: center; 
    vertical-align: middle; 
    display: table-cell; 
    margin: 20px; 
    border:1px solid black; 
    line-height: 100px; 
}

HTML：

<table class="wrap"> 
<tr> 
    <th><h1>Design Your Bag</h1></th> 
</tr> 
<tr> 
    <th><img src="CMBlogo.gif" style="height:100px;width:100px;" alt="logo"></th> 
</tr> 
<tr id="right"> 
    <th><h2><a href="#"><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span></a>&nbsp;&nbsp;Live Help!</h2> 
    <h4>(202)-629-3053</h4> 
    <h4><a href="mailto:[email protected]" subject="Contact and Order Information">[email protected]</a></h4></th> 
</tr> 
</table>

問題：當我試圖讓每個TR垂直中心的圖片和文字，沒有任何反應...我在網上搜索了很多類似的問題，並嘗試使用或「line-height」，並向左/右/中心浮動。仍然無法使它的工作...也許有一些小的誤解或錯誤，我不知道..請幫助我..

來源

2015-04-04 Julia

[小提琴]（http://jsfiddle.net/bfelda/ocykt04h/），似乎垂直居中。 – 2015-04-04 02:46:20

如果我的回答沒有幫助你，不幸的是，這是因爲我不明白你在問什麼。請編輯這個問題，並更具體地說明你想要什麼對齊。 – 2015-04-04 03:11:05

哦..我想要在它的div中的每個元素將在空間的中心。我的意思是「徽標」圖像將具有相同的距離（右上和左下）...謝謝 – Julia 2015-04-11 03:44:44

您的錶行元素是垂直對齊的中間。如果你希望你的整個表在頁面上垂直對齊請執行以下操作：

html, body{ margin:0; padding:0; height:100%; width:100%; } 
 
.wrap { 
 
    width: 100%; 
 
    display: table; 
 
    height:100px; 
 
    position:relative; 
 
    top:50%; 
 
    transform:translateY(-50%); 
 
} 
 
.wrap tr { 
 
    width:30%; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
    margin: 20px; 
 
    border:1px solid black; 
 
    line-height: 100px; 
 
}

<html> 
 
    <body> 
 
<table class="wrap"> 
 
<tr> 
 
    <th><h1>Design Your Bag</h1></th> 
 
</tr> 
 
<tr> 
 
    <th><img src="CMBlogo.gif" style="height:100px;width:100px;" alt="logo"></th> 
 
</tr> 
 
<tr id="right"> 
 
    <th><h2><a href="#"><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span></a>&nbsp;&nbsp;Live Help!</h2> 
 
    <h4>(202)-629-3053</h4> 
 
    <h4><a href="mailto:[email protected]" subject="Contact and Order Information">[email protected]</a></h4></th> 
 
</tr> 
 
</table> 
 
    </body> 
 
</html>

複製到小提琴

來源

2015-04-04 03:06:44

CSS垂直對齊：中不起作用

回答

相關問題