Question

我似乎无法将文本垂直居中于div的中心。它一直漂浮在顶部。这是我的代码： CSS

.dialer{
background-image: url('http://v4m.mobi/php/fb/images/close.png'); 
background-repeat: none;  
width: 100; 
height: 40; 
margin: 0 auto;
-moz-box-shadow: 0 12px 8px -8px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 12px 8px -8px rgba(0,0,0,0.7);
box-shadow: 0 12px 8px -8px rgba(0,0,0,0.7);
text-align: center;
}

HTML

<div class="dialer" align="center"><a href="http://v4m.mobi/php/fb/index.php"   
style="color: #ffffff; font-size: 18px; font-weight: bold; text-decoration: none; 
margin-top: 20px;">Close App</a></div>

有什么建议吗？

谢谢

Answer 1

试试这个

http://css-tricks.com/vertically-center-multi-lined-text/

Answer 2

将vertical-align: middle;添加到.dialer。

你也可以margin: auto auto;，因为你有高度和宽度的固定值。但是，您需要指定值的“类型”，例如px，%或适合您目的的任何内容。

你也可以做这样的相对定位：

.dialer {
    ...
    position: relative;
    top: 47%;
}

Answer 3

从a标签中删除“margin-top：20px”，然后使用类似：

的内容

.dialer {
    ...
    height: 40px;
}

.dialer a {
    line-height: 40px;
}

...但只有当你知道文字适合一行时，这才有效。

Answer 4

这是一个有效的小提琴：http://jsfiddle.net/PvVr6/4/ 我已经更新了小提琴，因此它也适用于多行内容。

.dialer{
       ... 
       width: 100px;
       height: 40px;
       ...
       vertical-align: middle;
    }

    .dialer a {
        display: inline-block;  
    }

在div中垂直居中文字？

4 个答案: