很简单的有关问题，求解决，多谢
日期：2014-05-17 浏览次数：20516 次
很简单的问题，求解决，谢谢。
<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
<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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
