テキストをdivで整列させる最も効果的な方法を探しています。いくつかの方法を試してみましたが、どれもうまくいかないようです。
.testimonialText {
position: absolute;
left: 15px;
top: 15px;
width: 150px;
height: 309px;
vertical-align: middle;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
padding: 1em 0 1em 0;
}
<div class="testimonialText">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
CSSにおける垂直方向のセンタリングについて
http://www.jakpsatweb.cz/css/css-vertical-center-solution.htmlを参照してください。
記事の要約
CSS 2のブラウザでは、display:table
/display:table-cell
を使ってコンテンツを中央に配置することができます。
サンプルは[JSFiddle](
)にもあります。div { border:1px solid green;}
<div style="display: table; height: 400px; overflow: hidden;">
<div style="display: table-cell; vertical-align: middle;">
<div>
everything is vertically centered in modern IE8+ and others.
</div>
</div>
</div>
古いブラウザ(Internet Explorer 6/7)用のハックをスタイルに統合し、#
を使って新しいブラウザ用のスタイルを隠すことができます。
div { border:1px solid green;}
<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=
"#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div style=" #position: relative; #top: -50%">
everything is vertically centered
</div>
</div>
</div>
line-height属性を追加して、その属性が
div`の高さと一致する必要があります。あなたの場合は
.center {
height: 309px;
line-height: 309px; /* same as height! */
}
<div class="center">
A single line.
</div>
実際には、height
属性を完全に削除することもできるでしょう。
ただし、これは1行のテキストにしか使えないので、注意が必要です。
これは、表示を 'table-cell'にして、vertical-align: middle;
を適用することで可能になります。
{
display: table-cell;
vertical-align: middle;
}
しかし、http://www.w3schools.com/cssref/pr_class_display.aspから無断でコピーしたこの抜粋によると、これはInternet Explorerのすべてのバージョンでサポートされていません。
注意 "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group".The values "inline-table", "table-column-group", "table-row", "table-row-group", "inherit" は、Internet Explorer 7以前ではサポートされていません。Internet Explorer 8では、!DOCTYPEが必要です。Internet Explorer 9は値をサポートしています。
次の表は、同じくhttp://www.w3schools.com/cssref/pr_class_display.aspの許容される表示値です。
.