text-align-lastプロパティで複数行のテキストの最後の行のみを中央揃えする方法
HTMLとCSSでdivブロック内のテキストを水平方向と垂直方向に中央揃えする方法
水平方向にテキストを中央揃えするには、主に以下の3つの方法があります。
text-align プロパティを使用する
最も簡単な方法は、text-align プロパティに center を設定することです。これは、div 要素内のすべてのテキストを水平方向に中央揃えします。
<div style="text-align: center;">
<h1>これは中央揃えされたテキストです</h1>
</div>
margin プロパティを使って、左右のマージンを auto に設定することで、テキストを水平方向に中央揃えすることができます。
<div>
<h1 style="margin: 0 auto;">これは中央揃えされたテキストです</h1>
</div>
flexbox を使用すると、より柔軟に要素を配置することができます。div 要素に display: flex を設定し、justify-content: center を設定することで、テキストを水平方向に中央揃えすることができます。
<div style="display: flex; justify-content: center;">
<h1>これは中央揃えされたテキストです</h1>
</div>
垂直方向の中央揃え
line-height プロパティに、div 要素の高さと同じ値を設定することで、テキストを垂直方向に中央揃えすることができます。
<div style="text-align: center; line-height: 200px;">
<h1>これは中央揃えされたテキストです</h1>
</div>
<div style="display: flex; align-items: center;">
<h1>これは中央揃えされたテキストです</h1>
</div>
水平方向と垂直方向に同時にテキストを中央揃えするには、上記の方法を組み合わせる必要があります。
例えば、text-align: center; と line-height: 200px; を組み合わせることで、テキストを水平方向と垂直方向に中央揃えすることができます。
<div style="text-align: center; line-height: 200px;">
<h1>これは中央揃えされたテキストです</h1>
</div>
上記以外にも、position プロパティや margin-top プロパティなどを利用して、テキストを中央揃えすることができます。
それぞれの方法にはメリットとデメリットがあるので、状況に合わせて最適な方法を選択する必要があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>中央揃えサンプル</title>
<style>
/* 水平方向と垂直方向に中央揃え */
.center {
text-align: center;
line-height: 200px;
}
/* 水平方向のみ中央揃え */
.center-horizontal {
text-align: center;
}
/* 垂直方向のみ中央揃え */
.center-vertical {
line-height: 200px;
}
</style>
</head>
<body>
<h1>水平方向と垂直方向に中央揃え</h1>
<div class="center">
これは中央揃えされたテキストです
</div>
<h1>水平方向のみ中央揃え</h1>
<div class="center-horizontal">
これは水平方向のみ中央揃えされたテキストです
</div>
<h1>垂直方向のみ中央揃え</h1>
<div class="center-vertical">
これは垂直方向のみ中央揃えされたテキストです
</div>
</body>
</html>
このコードを実行すると、以下のようになります。
水平方向と垂直方向に中央揃え
これは中央揃えされたテキストです
水平方向のみ中央揃え
これは水平方向のみ中央揃えされたテキストです
垂直方向のみ中央揃え
これは垂直方向のみ中央揃えされたテキストです
上記以外にも、様々な方法でテキストを中央揃えすることができます。詳細は上記の参考情報をご覧ください。
水平方向と垂直方向にテキストを中央揃えするその他の方法
position プロパティと transform プロパティを使用する
position プロパティに absolute を設定し、transform プロパティを使用して translate(-50%, -50%) を設定することで、テキストを水平方向と垂直方向に中央揃えすることができます。
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<h1>これは中央揃えされたテキストです</h1>
</div>
margin プロパティと padding プロパティを使用して、テキストを上下左右に等しい余白を設定することで、テキストを水平方向と垂直方向に中央揃えすることができます。
<div style="margin: 0 auto; padding: 100px;">
<h1>これは中央揃えされたテキストです</h1>
</div>
<div style="display: grid; place-items: center;">
<h1>これは中央揃えされたテキストです</h1>
</div>
Flexbox を使用し、align-content プロパティに center を設定することで、テキストを垂直方向に中央揃えすることができます。
<div style="display: flex; align-content: center;">
<h1>これは中央揃えされたテキストです</h1>
</div>
text-align-last プロパティは、複数行のテキストの最後の行のみを中央揃えするために使用されます。
<div style="text-align: center; text-align-last: center;">
<h1>これは中央揃えされたテキストです</h1>
<p>これは複数行のテキストです</p>
</div>
どの方法を選択するべきかは、状況によって異なります。以下のような点を考慮する必要があります。
- ブラウザのサポート状況
- レイアウトの複雑さ
- コードの読みやすさ
html css
