html - 如何调整框的大小但仍将文本放在其中？

Question

在以下 HTML 中：

<div class='title'><h2>Title</h2></div>

我想调整盒子的大小，所以写了以下内容：

.title {
display: block;
border-radius: 12px;
border: 1px solid;
}

但是，生成的框看起来有点大，因此我尝试调整它的大小。

.title {
height: 90%;
}

但是，即使我尝试编写上述代码，结果框也不受设置的影响。

.title {
height: 100px;
}

这行得通。然而，它里面的文字不再在中心，所以我试着把它放在中心。

.title h2 {
vertical-align: middle;
}

但是，这不起作用。

那么如何调整框的大小，但里面的文本仍然完好无损？

另外，为什么第一个高度设置不起作用，而第二个设置？

谢谢。

Answer 1

尝试申请：（工作jsFiddle）

.title h2 {
    margin:0px;
    line-height:100px; /* change to fit your needs */
}

vertical-align在这种情况下不是最好的方法..

更新：

改用这个 jsFiddle，它可以vertical-align根据需要使用，并且不需要应用line-heightof h2.. 秘诀是让父母display:table;和孩子display:table-cell：

.title {
    display: table; /* Here's the trick */
    border-radius: 12px;
    border: 1px solid;
    height: 100px;
    width:100%;
}

.title h2 {
    display:table-cell; /* Here's the trick */
    height:100%;
    vertical-align:middle;
}

Answer 2

检查这个jsfiddle。您可以设置line-height属性来实现这一点。

h2{line-height: 50px;}