0

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

ただし、これは機能しません。

では、ボックスのサイズを変更しても、テキストをそのまま保持するにはどうすればよいでしょうか?

また、最初の高さ設定が機能しないのに、2 番目の高さ設定が機能するのはなぜですか?

ありがとう。

4

2 に答える 2

2

適用してみてください: (動作中の jsFiddle )

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

vertical-alignこの場合、最善のアプローチではありません..

アップデート：

代わりにこの jsFiddleを使用してください。必要に応じて使用され、のvertical-alignを適用する必要はありません。秘密は親と子を作成することです:line-heighth2display: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;
}
于 2013-08-07T16:35:44.780 に答える