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

添加行高，其属性值可衡量包含 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中垂直对齐文本？

2 个答案: