CSS 中的垂直对齐

Question

我在

中有一个

。 Div 中是文本，该文本的大小会发生变化。

html:

<li id="button_welcome"><div>Welcome</div></li>

css:

#about_nav li{
    height:48px;
    width:130px;
    margin-bottom:15px;
}
#about_nav li div{
    text-align:right;
    margin-right:10px;
    vertical-align:middle;
}

如何让文本保持在

的中间？

PS 我在

上有一个渐变背景，但我删除了它，因为它太大了。

欢呼吧，

弗雷泽

Answer 1

更新

如果你想使用渐变背景，你可以尝试CSS方式；看看小提琴...

http://jsfiddle.net/UnsungHero97/F5FEg/1/

相反，如果您想使用图像，它不应影响文本的放置方式，因为这是“背景”图像。如果您确实遇到了一些奇怪的定位，请更新您的问题并向我们展示代码/屏幕截图/小提琴的问题所在。

---

给它一个与

一样高的line-height...

#about_nav li div{
    text-align:right;
    margin-right:10px;
    line-height: 48px; /* as tall as the li */
}

垂直对齐是一件棘手的事情。看看这篇文章，了解如何vertical-align工作以及如何一般垂直对齐事物...

http://phrogz.net/CSS/vertical-align/index.html

我希望这会有所帮助。
赫里斯托

Answer 2

神奇之处在于使用 css 模拟表格布局

#about_nav li{
    height:48px;
    width:130px;
    margin-bottom:15px;
    display:table-row;
}
#about_nav li div{
    text-align:right;
    margin-right:10px;
    vertical-align:middle;
    display:table-cell;    
}

Answer 3

使 line-height 与 height 的值相同。字体大小应小于高度。

<style>
    #my_div{
        height: 30px;
        line-height: 30px;
        font-size: 10px;
        border: 1px solid black;
        width: 200px;
        text-align: center;
    }    
</style>
<div id="my_div">My DIV</div>

Answer 4

我非常喜欢 Hristos 的回答 =) 这是另一个解决方案：

#about_nav li{
    height:48px;
    width:130px;
    margin-bottom:15px;
    border:1px solid;
}
#about_nav li div{
    height:inherit;
    width:inherit;
    padding-right:10px;
    display: table-cell;
    text-align:right;
    vertical-align: middle;
    border:1px solid;
}

如果设置 div 的高度和宽度，则可以使用 Vertical -align 属性

请参阅示例： http://jsfiddle.net/3asEN/

Answer 5

添加文本对齐：居中；到 div 或 li。