Vertically align text in <a> element with CSS

This question already has an answer here:

How do I vertically center text with CSS? 34 answers

---

If you want to center the text horizontally then try:

text-align: center;

If you want to center the text vertically then try:

line-height: 40px; //Where 40px is the height of your parent element

Keep in mind, that when using line-height, it will only work on one line of text. If you want to do multiple lines of text then I'm afraid you have to specify a height to the text and then use position: absolute; on the text with position: relative; on the parent element.

For your multi-line example I'd try something like the following jsFiddle:

li {
    list-style-type:none;
    margin:0;
    padding:0;
    position: relative;
    height: 60px;
    width: 200px;
    display: block;
    background:red;
}

li a {
    width:100px;
    height:40px;
    position: absolute;
    top: 50%;
    margin-top: -20px;
}

链接地址: http://www.djcxy.com/p/41654.html

上一篇: 屏幕中间的中心h1

下一篇: 将<a>元素中的文字与CSS垂直对齐