2015-04-04 118 views
0

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”,并向左/右/中心浮动。仍然无法使它的工作...也许有一些小的误解或错误,我不知道..请帮助我..

+1

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

+0

如果我的回答没有帮助你,不幸的是,这是因为我不明白你在问什么。请编辑这个问题,并更具体地说明你想要什么对齐。 – 2015-04-04 03:11:05

+0

哦..我想要在它的div中的每个元素将在空间的中心。我的意思是“徽标”图像将具有相同的距离(右上和左下)...谢谢 – Julia 2015-04-11 03:44:44

回答

0

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

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>

复制到小提琴