在div中垂直居中文本？答案

【问题标题】：Center text vertically in a div?在div中垂直居中文本？
【发布时间】：2012-05-10 03:30:37
【问题描述】：

我似乎无法在 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>

有什么建议吗？

谢谢

【问题讨论】：

你有width: 100; height: 40; 你需要一些单位。 px、em、% 等
How do I center text vertically with css 和许多其他的可能重复。
How to align text vertically center in div with css?的可能重复

标签： html css

【解决方案1】：

试试这个

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

【讨论】：

【解决方案2】：

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

您也可以使用margin: auto auto;，因为您的高度和宽度具有固定值。不过，您需要指定值的“类型”，例如 px、% 或任何适合您的目的。

你也可以像这样进行相对定位：

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

【讨论】：

这是唯一的 CSS 跨浏览器多行解决方案。
谢谢你的回答，上面说的都试过了，还是不行。还有其他建议吗？

【解决方案3】：

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

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

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

...但这仅在您知道文本适合一行时才有效。

【讨论】：

谢谢。这行得通。但这似乎是一个非官方的修复，你不会在 w3schools.com 上看到......为什么其他任何修复，比如垂直对齐：中间都不起作用？我在宽度和高度上添加了“px”并添加了垂直对齐：中间，但没有运气

【解决方案4】：

这是一个有效的小提琴：http://jsfiddle.net/PvVr6/4/ 我已经更新了小提琴，所以它也可以处理多行内容。

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

    .dialer a {
        display: inline-block;  
    }

【讨论】：

检查更新：显示：内联块；而不是行高
感谢您的回答。试过了，对我不起作用...正如您在 JSfiddle 中看到的那样，它将文本扔到 div 的底部，而不是垂直中间