CSS垂直对齐：中间不起作用答案

【问题标题】：CSS Vertical-align:middle doesn't workCSS垂直对齐：中间不起作用
【发布时间】：2015-04-04 11:06:44
【问题描述】：

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:brian@metrologo.com" subject="Contact and Order Information">brian@metrologo.com</a></h4></th>
</tr>
</table>

问题：当我尝试在每个 tr 垂直中心制作图像和文本时，没有任何反应...我在网上搜索了很多类似的问题，并尝试使用 , 或“行高”，然后向左浮动/右/中。仍然无法使其工作...可能有一些我没有意识到的小误解或错误..请帮助我..

【问题讨论】：

fiddle 复制到fiddle，好像是垂直居中的。
如果我的回答对你没有帮助，很遗憾，这是因为我不明白你在问什么。请编辑此问题，并更具体地说明您希望如何对齐。
哦..我希望其 div 中的每个元素都位于空间的中心。我的意思是“徽标”图像与两侧的距离相同（右上角和左上角）...谢谢

标签： html css vertical-alignment

【解决方案1】：

您的表格行元素在中间垂直对齐。如果您希望整个表格在页面上垂直对齐，请执行以下操作：

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:brian@metrologo.com" subject="Contact and Order Information">brian@metrologo.com</a></h4></th>
</tr>
</table>
  </body>
</html>

【讨论】：