CSS3: 如何在 div 中垂直对齐文本？

Question

我有一个带有自定义字体的 div，我正在努力使它的文字高度与它所在的 div 高度相同。

我一直在尝试寻找一种方法来覆盖没有 div 的文本的垂直对齐方式，但没有成功。为此，我希望有类似文本缩进方法的方法。

Here's a simple JsFiddle with my example.

<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lekton' rel='stylesheet' type='text/css'>
<style>
.texto {
    background-color: #000;
    height: 24px;
    font-family: 'Lekton', sans-serif;
    color:white;
    font-size: 24px;
}
</style>
</head>
<body>
    <div class="texto">Test</div>
</body>
</html>

Answer 1

使用 line-height CSS 属性 :

line-height : 24px;

Answer 2

添加一个 line-height 和一个 属性值 测量包含 的高度DIV

<style>
    .texto {
        background-color: #000;
        height: 24px;
        font-family: 'Lekton', sans-serif;
        color: white;
        font-size: 24px;
        line-height: 24px; /* This line solves your problem */
    }
</style>
</head>
<body>
    <div class="texto">Test</div>
</body>

CSS3: 如何在 div 中垂直对齐文本？

CSS3: How to align text vertically within a div?

html

css

alignment