How to vertically center anchor tag text inside of a ul li

问题

Here is my 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>

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?

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%;
}

my a:

    .header #sub_nav li a {
    display: table-cell;
    height: 45px;
    vertical-align: middle;
    width: 111px;
}

回答1:

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.

回答2:

If you have only one item within the li (or div, etc), the easiest way is to set line-height to be the same as the element's height, and it will be vertically aligned. I have created a simple fiddle below, and hope this helps! http://jsfiddle.net/fCkLJ/

li {
  /* other styling */
  height: 30px;
  line-height: 30px; 
}

回答3:

Try:

li{
padding-top:20%;
padding-bottom:20%;
}

This will cause even padding top/bottom on the LI but if one LI wraps and another one doesnt it they will be different heights.

http://jsfiddle.net/VMCH6/1/

回答4:

There are many ways, looks here

回答5:

If you are using background-image, then you should set a fixed width height for the li.a element and use this hack for the a element:

li a {
    height: 50px;
    width: 300px;
    margin: auto 0;
    display: block;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
}

This is the working example (even with your image as background). The complete button will be clickable and the flexibility to be multiple lines:

http://jsfiddle.net/GqBAL/494/

Note: This is not 100% cross-browser, but is the best solution.

回答6:

I dont have enough knowledge of HTML/CSS but i think it is Ok .

in this answer i have removed height from UL/LI and provided auto height , and in anchor <a> tag i have used padding , to display a bigger-height-centralized button .

CSS part is :

<style>
html , body , ul , li 
{
    margin:0;
    padding:0;
}
html , body
{
    width:100%;
    height:100%;
}
ul
{
    width:100%;
    height:auto;    
    background-color:red;
}
li
{
    width:33%;
    height:auto;    
    display:inline-block;
    background-color:green; 
}
a
{
    width:100%;
    height:100%;
    text-align:center;
    display:block;
    padding-top:10%;
    padding-bottom:10%;
}
</style>

HTML part is :

<body>
<ul>
<li><a href="">tushar</a></li>
<li><a href="">tushar</a></li>
<li><a href="">tushar</a></li>
</ul>
</body>

来源：https://stackoverflow.com/questions/13963564/how-to-vertically-center-anchor-tag-text-inside-of-a-ul-li

标签

css

html-lists

anchor

vertical-alignment