[解決済み] CSSでテキストを垂直方向にセンタリングするには?[重複しています]
質問
私の場合は
<div>
要素の内容を整列させたいと思います。
<div>
縦中央
以下は私の
<div>
のスタイルになります。
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}
<div id="box">
Lorem ipsum dolor sit
</div>
この目標を達成するための最適な方法は何でしょうか?
どのように解決するのですか?
この基本的な方法を試してみてはいかがでしょうか。
div {
height: 100px;
line-height: 100px;
text-align: center;
border: 2px dashed #f69c55;
}
<div>
Hello World!
</div>
ただし、行の高さを含む box 要素と同じ高さに設定しているため、1 行のテキストに対してのみ機能します。
より汎用性の高い方法
これもテキストを縦に揃える方法です。この方法は、1 行のテキストにも複数行のテキストにも対応しますが、高さを固定したコンテナが必要です。
div {
height: 100px;
line-height: 100px;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div>
<span>Hello World!</span>
</div>
CSSは、単に
<div>
を、縦方向に中央揃えで配置します。
<span>
を設定することで
<div>
のラインハイトをその高さと同じにし、さらに
<span>
を持つインラインブロックです。
vertical-align: middle
. そして、行高を通常の
<span>
そのため、その内容はブロックの中で自然に流れます。
テーブル表示のシミュレーション
そして、もう一つのオプションは、古いバージョンでは動作しないかもしれません。
をサポートしていないブラウザでは
display: table
と
display: table-cell
(基本的にInternet Explorer 7だけ)。CSS を使ってテーブルの動作をシミュレートし(テーブルは垂直方向の配置をサポートしているので)、HTML は 2 番目の例と同じになります。
div {
display: table;
height: 100px;
width: 100%;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: table-cell;
vertical-align: middle;
}
<div>
<span>Hello World!</span>
</div>
絶対位置の使用
このテクニックは、top, bottom, left, rightを0に設定した絶対位置の要素を使用します。詳細は、Smashing Magazineの記事で説明されています。 CSSによる絶対的な水平・垂直方向の中央揃え .
div {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
width: 100%;
border: 2px dashed #f69c55;
}
<div>
<span>Hello World!</span>
</div>
関連
-
document.forms 使用方法
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] 画像の横のテキストを縦に揃える?
-
[解決済み] div 内の画像を縦に並べる方法
-
[解決済み] divの中のテキストを縦に揃えるにはどうしたらいいですか?
-
[解決済み】CSSを使用して、すべてのブラウザでdiv要素を垂直方向に中央に配置するにはどうすればよいですか?
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Bootstrap 3.3.7で改行する方法
-
[解決済み] CSS - カーソルを置いたときに塗りつぶしの色を変更する - SVG PATH
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] divの中のテキストを縦に揃えるにはどうしたらいいですか?
-
[解決済み] 特定のクラスや属性を持たない要素を選択するCSSセレクタは書けますか?
-
[解決済み] IMGとCSSのbackground-imageはいつ使い分ける?
-
[解決済み] Webサイトのブラウザタブアイコン(ファビコン)を追加する方法を教えてください。
-
[解決済み] HTML Input="file" Accept Attribute File Type (CSV)
-
[解決済み] マークダウンにおける相互参照 (名前付きアンカー)
-
[解決済み] 要素を水平方向と垂直方向の中央に配置する方法