如何在ul li内部垂直定位锚标签文本 [英] How to vertically center anchor tag text inside of a ul li
问题描述
这是我的html:
<ul id="sub_nav" class="block_hide trim no_list no_line" style="display: block; left: 524.5px;">
<li><a href="/path1" class="one">1st button</a></li>
<li><a href="/path2" class="one">2nd button</a></li>
<li><a href="/path3" class="one">3rd button</a></li>
</ul>
如果当前拥有的图像,我还附加了一张图像.我尝试添加显示:table-cell; 垂直对齐:中间;到锚标记类,但它不起作用,我还尝试使用以下类在锚标记周围添加跨度:display:table-cell;垂直对齐:中间;但这也不起作用,在两种情况下按钮的高度都不恒定.
I also attached an image if what I currently have. I tried adding display: table-cell; vertical-align: middle; to the anchor tag class but it did not work I also tried adding a span around teh anchor tag with a class with: display: table-cell; vertical-align: middle; but that did not work either, in both cases button's heights were not constant.
如何使文本垂直居中并保持按钮的高度和宽度相同?
How can I vertically center text and keep my buttons height and width the same?
最终使用了display:table-cell解决方案,因为它是最跨浏览器的....起初我不喜欢它,因为我不得不硬编码按钮的宽度而不是100%,但是一次过去,这是一个可靠的解决方案: 我的李:
Ended up going with the display:table-cell solution as it was the most cross browser....I did not like it at first because I had to hard code the width of my button instead of 100% but once I got past that it was a solid solution: my li:
.header #sub_nav li {
display: table;
float: left;
font-size: 11px;
line-height: 12px;
margin-bottom: 12px;
margin-left: 12px;
width: 86%;
}
我的一个:
.header #sub_nav li a {
display: table-cell;
height: 45px;
vertical-align: middle;
width: 111px;
}
推荐答案
我做的事情与您的要求类似.将父级定义为"display:table",并将元素本身定义为"vertical-align:middle"& "display:table-cell"对我有用.
I Do something similar to what you're asking. Defining the parent as "display: table" and the element itself with "vertical-align:middle" & "display:table-cell" worked for me.
这篇关于如何在ul li内部垂直定位锚标签文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!