Question

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>

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

CSS Vertical-align：中间不起作用

1 个答案: