Rumah > hujung hadapan web > html tutorial > css让a元素位于li元素正中_html/css_WEB-ITnose

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

WBOY
Lepaskan: 2016-06-24 11:29:21
asal
1528 orang telah melayarinya


如图,让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>
Salin selepas log masuk

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan