【HTML/CSS/Font Awesome】大きなFontAwesomeアイコンとテキストを垂直中央揃えする方法3選
このチュートリアルでは、HTML、CSS、Font Awesome を使って、大きな Font Awesome アイコンとテキストを垂直方向に中央揃えする方法を説明します。 垂直方向に中央揃えにする方法はいくつかありますが、ここでは 3 つの一般的な方法を紹介します。
方法 1： flexbox を使う
flexbox は、Web ページのレイアウトを柔軟に制御できる強力な CSS レイアウトモジュールです。 flexbox を使って、アイコンとテキストを垂直方向に中央揃えするには、以下の手順を行います。
- 親要素に
display: flexとalign-items: centerを設定します。 これにより、親要素内の要素が垂直方向に中央揃えになります。 - アイコンとテキストをそれぞれ子要素として配置します。
- アイコンに
font-sizeプロパティを使って、適切なサイズを設定します。 - 必要に応じて、アイコンとテキストの間隔を調整するために、
marginやpaddingプロパティを使います。
例
<div class="container">
<i class="fa fa-star"></i>
<p>テキスト</p>
</div>
.container {
display: flex;
align-items: center;
}
.fa-star {
font-size: 48px;
margin-right: 10px;
}
方法 2： line-height を使う
line-height プロパティは、要素内の行の高さを設定します。 このプロパティを使って、アイコンとテキストを垂直方向に中央揃えするには、以下の手順を行います。
- 親要素に
line-heightプロパティを設定します。 この値は、親要素の高さと同じにする必要があります。 - アイコンとテキストに
display: inline-blockを設定します。 これにより、line-heightプロパティが適用されるようになります。
<div class="container">
<i class="fa fa-star"></i>
<p>テキスト</p>
</div>
.container {
line-height: 48px; /* アイコンのサイズと同じにする */
}
.fa-star,
p {
display: inline-block;
}
方法 3： table 要素を使う
table 要素を使って、アイコンとテキストを垂直方向に中央揃えすることもできます。 この方法は、古いブラウザーとの互換性を確保したい場合に役立ちます。
- 親要素を
table要素として設定します。 td要素にvertical-align: middleを設定します。 これにより、td要素内のコンテンツが垂直方向に中央揃えになります。
<table>
<tr>
<td><i class="fa fa-star"></i></td>
<td><p>テキスト</p></td>
</tr>
</table>
.fa-star {
font-size: 48px;
}
補足
- 上記の方法は、あくまでも例です。 状況に応じて、スタイルを調整する必要があります。
- Font Awesome アイコンのサイズを変更する場合は、
font-sizeプロパティを調整してください。 - 垂直方向だけでなく、水平方向にも中央揃えしたい場合は、
text-align: centerを設定します。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Awesome アイコンとテキストを垂直方向に中央揃え</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<style>
.container {
display: flex; /* flexbox を使う */
align-items: center; /* 垂直方向に中央揃え */
}
.fa-star {
font-size: 48px; /* アイコンのサイズ */
margin-right: 10px; /* アイコンとテキストの間隔 */
}
</style>
</head>
<body>
<div class="container">
<i class="fa fa-star"></i>
<p>テキスト</p>
</div>
</body>
</html>
CSS
.container {
display: flex;
align-items: center;
}
.fa-star {
font-size: 48px;
margin-right: 10px;
}
説明
このコードは、以下の要素で構成されています。
<!DOCTYPE html>: HTML ドキュメントの宣言<html lang="ja">: HTML ドキュメントのルート要素。lang属性で言語を日本語に指定<head>: HTML ドキュメントのヘッダー部分。 メタデータやリンクなどを記述<meta charset="UTF-8">: 文字エンコーディングを UTF-8 に設定<meta name="viewport" content="width=device-width, initial-scale=1.0">: ビューポートの設定。 デバイスの幅に合わせてページをスケーリング<title>Font Awesome アイコンとテキストを垂直方向に中央揃え</title>: ドキュメントのタイトル<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">: Font Awesome の CSS ファイルをインポート<style>: スタイル定義.container: 親要素のスタイル。display: flexとalign-items: centerを設定して、アイコンとテキストを垂直方向に中央揃え.fa-star: アイコンのスタイル。font-sizeでアイコンのサイズを設定し、margin-rightでアイコンとテキストの間隔を設定
実行方法
- 上記のコードを
index.htmlなどのファイルに保存します。 - Web ブラウザで
index.htmlファイルを開きます。
結果
Web ブラウザに、大きな Font Awesome アイコンとテキストが垂直方向に中央揃えで表示されます。
Font Awesomeアイコンとテキストを垂直方向に中央揃えするその他の方法
方法 4： position プロパティと top 属性を使う
この方法は、アイコンとテキストをそれぞれ別の要素として配置し、position プロパティと top 属性を使って垂直方向に中央揃えする方法です。
<div class="container">
<div class="icon">
<i class="fa fa-star"></i>
</div>
<p>テキスト</p>
</div>
.container {
position: relative; /* 親要素に相対配置を設定 */
}
.icon {
position: absolute; /* アイコンを絶対配置に設定 */
top: 50%; /* アイコンを垂直方向に50%の位置に配置 */
transform: translateY(-50%); /* アイコンを垂直方向に中央に配置 */
}
.fa-star {
font-size: 48px;
}
方法 5： padding プロパティと垂直方向の margin を使う
この方法は、親要素に padding-top と padding-bottom プロパティを設定し、アイコンに margin-top と margin-bottom プロパティを設定して、垂直方向に中央揃えする方法です。
<div class="container">
<i class="fa fa-star"></i>
<p>テキスト</p>
</div>
.container {
padding-top: 24px; /* アイコンの半分の高さ */
padding-bottom: 24px; /* アイコンの半分の高さ */
}
.fa-star {
font-size: 48px;
margin-top: -24px; /* アイコンの半分の高さ */
margin-bottom: -24px; /* アイコンの半分の高さ */
}
この方法は、親要素に display: flex と align-items: center を設定し、アイコンとテキストをそれぞれ子要素として配置する方法です。この方法は、flexboxの垂直方向の機能を利用しています。
<div class="container">
<i class="fa fa-star"></i>
<p>テキスト</p>
</div>
.container {
display: flex;
align-items: flex-start; /* 垂直方向に上端で揃える */
}
.fa-star {
font-size: 48px;
margin-right: 10px;
}
- 方法 1 は、flexbox を使って柔軟なレイアウトを作成したい場合に適しています。
- 方法 3 は、古いブラウザーとの互換性を確保したい場合に適しています。
- 方法 4 は、アイコンとテキストを個別に制御したい場合に適しています。
- 方法 6 は、flexboxの垂直方向の機能を利用した方法です。
どの方法を選択するにしても、重要なのは、一貫したデザインを維持し、ユーザーにとって読みやすく使いやすいレイアウトを作成することです。
html css font-awesome
