很简单的问题,求解决,谢谢。
<html>
<head>
</head>
<body>
<div style="width: 800px; height: 50px; background-color: black; color: white;">
<a href="#">123456</a>
</div>
</bogy>
</html>
上面这段代码,我想让<a>标签在div中居中,怎么实现。
注:
我知道一种方式是:div中写上line-height: 50px或者是通过设padding-top来实现。
但是我有
两个疑问:
疑问一:我设置<a href="#"
style="vertical: middle;">123456</a>为什么不行?该属性的意思不是:将元素放到父元素的垂直居中的位置吗?
疑问二:我设置<a href="#"
style="margin-top:10px;">123456</a>为什么没有反映?我理解的margin就是<a>元素与它外面的元素(在此即:div元素)的距离,为什么没有反映。
求解答,谢谢。
------解决方案--------------------<a href="#" style="margin-top:10px;float:left">123456</a>
------解决方案--------------------vertical-align只作用于在同一行内的元素,它的垂直并不是相对于整个Box而言的。
style="margin-top:10px;"在a上无效是因为a是行内元素,margin-top和margin-bottom是不起作用的..在设置float或relative会触发layout,a就会拥有自己的布局,也就相当于是一个块级元素了。。
------解决方案--------------------如果你有一个大一些div,其中包含一个小的div,你希望小的能够在大的之内垂直居中对其,vertical-align是没用的。CSS中的Vertical Align经常被用到img与文字对齐中。下面这个网址可能对你有所帮助http://www.jzxue.com/wangyesheji/css/201006/11-3937.html