Webデザイナー必見！Flexboxを使ってテキストを美しく中央揃えする方法
Flexboxでテキストを垂直方向に中央揃えする方法
align-items プロパティは、Flexboxコンテナ内のアイテムを垂直方向にどのように配置するかを指定します。このプロパティを使ってテキストを垂直方向に中央揃えするには、以下の値を指定します。
center: アイテムを垂直方向に中央揃えします。flex-start: アイテムを垂直方向の上端に配置します。
以下の例では、align-items: center; を使用して、Flexboxコンテナ内のテキストを垂直方向に中央揃えしています。
<div class="container">
<h1>タイトル</h1>
<p>本文</p>
</div>
.container {
display: flex;
align-items: center;
}
<div class="container">
<h1>タイトル</h1>
<p>本文</p>
</div>
.container {
display: flex;
justify-content: center;
}
margin プロパティは、要素の外側の余白を指定します。このプロパティを使ってテキストを垂直方向に中央揃えするには、以下の方法を使用します。
margin: 0 auto;を使用して、要素の左右の余白を自動的に設定し、水平方向に中央揃えします。
以下の例では、margin: 0 auto; を使用して、Flexboxコンテナ内のテキストを水平方向に中央揃えし、margin-top: auto; を使用して、垂直方向に中央揃えしています。
<div class="container">
<h1>タイトル</h1>
<p>本文</p>
</div>
.container {
display: flex;
}
h1 {
margin: 0 auto;
margin-top: auto;
}
Flexboxを使ってテキストを垂直方向に中央揃えするには、align-items プロパティ、justify-content プロパティ、margin プロパティなどの方法があります。それぞれの方法にはメリットとデメリットがあるので、状況に合わせて最適な方法を選択してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexboxでテキストを垂直方向に中央揃えする例</title>
</head>
<body>
<div class="container">
<h1>タイトル</h1>
<p>本文</p>
</div>
</body>
</html>
.container {
display: flex;
align-items: center;
justify-content: center;
}
上記のコード以外にも、Flexboxを使ってテキストを垂直方向に中央揃えするには、いくつかの方法があります。
以下のコードは、margin: 0 auto; と margin-top: auto; を使用して、Flexboxコンテナ内のテキストを垂直方向に中央揃えする例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexboxでテキストを垂直方向に中央揃えする例</title>
</head>
<body>
<div class="container">
<h1>タイトル</h1>
<p>本文</p>
</div>
</body>
</html>
.container {
display: flex;
}
h1 {
margin: 0 auto;
margin-top: auto;
}
Flexbox以外でテキストを垂直方向に中央揃えする方法
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テキストを垂直方向に中央揃えする例</title>
</head>
<body>
<div class="container">
<h1>タイトル</h1>
<p>本文</p>
</div>
</body>
</html>
.container {
text-align: center;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テキストを垂直方向に中央揃えする例</title>
</head>
<body>
<div class="container">
<h1>タイトル</h1>
<p>本文</p>
</div>
</body>
</html>
.container {
height: 100px;
line-height: 100px;
}
position プロパティと top プロパティを使う
position プロパティを使って要素を相対的に配置し、top プロパティを使って要素の上部の位置を指定することで、テキストを垂直方向に中央揃えすることができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テキストを垂直方向に中央揃えする例</title>
</head>
<body>
<div class="container">
<h1>タイトル</h1>
<p>本文</p>
</div>
</body>
</html>
.container {
position: relative;
height: 100px;
}
h1 {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
margin プロパティを使って要素の外側の余白を指定することで、テキストを垂直方向に中央揃えすることができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テキストを垂直方向に中央揃えする例</title>
</head>
<body>
<div class="container">
<h1>タイトル</h1>
<p>本文</p>
</div>
</body>
</html>
.container {
height: 100px;
}
h1 {
margin-top: auto;
}
html css flexbox
