[英]Center text vertically in a div?
我似乎无法在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>
有什么建议么?
谢谢
添加vertical-align: middle;
到.dialer
您也可以做margin: auto auto;
因为您有固定的高度和宽度值。 不过,您需要指定值的“类型”,例如px
, %
或任何适合您目的的值。
您也可以像这样进行相对定位:
.dialer {
...
position: relative;
top: 47%;
}
从a标签中删除“ margin-top:20px”,然后使用类似方法:
.dialer {
...
height: 40px;
}
.dialer a {
line-height: 40px;
}
...但这仅在您知道文本适合一行时才有效。
这是一个有效的小提琴: http : //jsfiddle.net/PvVr6/4/我已经更新了小提琴,因此它也可以用于多行内容。
.dialer{
...
width: 100px;
height: 40px;
...
vertical-align: middle;
}
.dialer a {
display: inline-block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.