如何在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屋！