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

Question

I have a div with a custom font and I'm trying to make it so the text has the same height as the div it's inside of. 我有一个具有自定义字体的div，我正在尝试制作它，以便文本与内部的div具有相同的高度。

I've been trying to find a way to override the vertical alignment of text without a div with no success. 我一直在尝试找到一种方法来覆盖没有div且没有成功的文本的垂直对齐方式。 I was hoping there was something like the text-indent method for this purpose. 我希望有类似此目的的文本缩进方法。

Here's a simple JsFiddle with my example. 这是带有我的示例的简单JsFiddle。

<!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

Add a line-height with a property value that measures the height of the containing DIV 添加一个带有测量该DIV高度的属性值的line-height

 <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 个解决方案

解决方案1
3 已采纳 2015-01-09 19:30:15

解决方案2
1 2015-01-09 19:31:24

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

问题描述

2 个解决方案

解决方案1 3 已采纳 2015-01-09 19:30:15

解决方案2 1 2015-01-09 19:31:24

解决方案1
3 已采纳 2015-01-09 19:30:15

解决方案2
1 2015-01-09 19:31:24