在css中垂直对齐

Question

我在<div>中有一个<li>。在Div is文本中，该文本的大小会发生变化。

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

如何让文字保持在<li>？

的中间位置

P.S。我在<li>上有一个渐变背景，但我删除了它，因为它很笨重。

欢呼，

弗雷泽

Answer 1

更新

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

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

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

---

与line-height ...

一样高<li>

#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

使线高与高度相同。字体大小应小于高度。

<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的答案很多=）Heres另一个解决方案：

#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

添加text-align：center;到div或li。