在div中垂直居中文本？

我似乎无法将文本垂直居中放置在div的中心。它始终位于顶部。这里是我的代码： CSS在div中垂直居中文本？

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

有什么建议？

谢谢

来源

2012-04-24 DextrousDave

你'宽度：100; 身高：40;'你在这里需要一些单位。 px，em，％等 – Kyle 2012-04-24 14:00:19

可能重复[如何以CSS垂直居中文本]（http://stackoverflow.com/questions/8714371/how-do-i-center-text-vertically-with-css）和其他许多人。 – 2012-04-24 14:44:42

可能的重复[如何将文本垂直居中在div与CSS？]（http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css） – user 2014-03-07 20:54:58

试试这个

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

来源

2012-04-24 14:39:03

谢谢，很好的回答 – DextrousDave 2012-04-24 16:51:54

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

你也可以这样做margin: auto auto;，因为你有固定的高度和宽度值。不过，您需要指定一个“类型”的值，例如px,%或任何适合您的用途的值。

你也可以做相对定位是这样的：从一个标签，然后使用类似：

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

来源

2012-04-24 13:59:11

这是CSS中唯一的跨浏览器多行解决方案。 – 2012-04-24 14:59:51

谢谢你的回答，尝试了你上面提到的一切，但它不起作用。任何其他建议？ – DextrousDave 2012-04-24 16:36:11

删除 “20像素的margin-top”：

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

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

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

来源

2012-04-24 14:02:27 claesv

谢谢。这工作。但它看起来像一个非官方的修补程序，你不会在w3schools.com上看到...为什么没有任何其他修复程序，如垂直对齐：中间工作？我在我的宽度和高度添加了“px”，并添加了垂直对齐：中间，但没有运气 – DextrousDave 2012-04-24 16:48:47

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

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

    .dialer a { 
     display: inline-block; 
    }

来源

2012-04-24 14:10:02 ThdK

但这不适用于麦芽内容 – 2012-04-24 14:40:21

检查更新：display：inline-block;而不是行高 – ThdK 2012-04-24 14:57:32

谢谢你的回答。尝试它，不适合我... 正如你可以在JSfiddle中看到的，它将文本扔到div的底部，而不是垂直中间 – DextrousDave 2012-04-24 16:41:02

在div中垂直居中文本？

回答

相关问题