Home > Web Front-end > HTML Tutorial > css让a元素位于li元素正中_html/css_WEB-ITnose

css让a元素位于li元素正中_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:29:21
Original
1529 people have browsed it


如图,让a元素中的文字位于li元素中的框框正中。
我使用了vertical-align: middle;它却只下移了一点点而已。我宽高都设置了。


回复讨论(解决方案)

为a标签设置line-height=li标签的高度

为a设置行高line-height::

vertical-align: middle; 这个你没理解清楚,你要居中,第一种,在外层设置为table-cell类型,并且不能有float:left;的。
第二种,vertical-align这个属性是相对于前一个才居中的,也就是说你要居中要在a标签前面在写一个标签,高度为100%的,才能使后面的vertical-align生效。

<ul>	<li style="display:table-cell;border:1px solid #ddd;width:200px;text-align:center; vertical-align:middle; height:50px;"><a href="javascript:void(0);">123</a></li>    <li style="display:block; border:1px solid #ddd;width:200px;text-align:center;height:50px;"><span style="display:inline-block;width:0px;height:100%;vertical-align:middle;"></span><a  href="javascript:void(0);">123</a></li></ul>
Copy after login

用a{margin:0 auto;}或li{ text-align:center;}均可

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template