text-align
プロパティを使用する方法:- 親要素に
text-align: center;
を指定すると、行内要素が中央に揃います。 text-align: left;
を指定すると、行内要素が左に揃います。text-align: right;
を指定すると、行内要素が右に揃います。
- 親要素に
例:
.parent-element {
text-align: center;
}
display: flex;
を使用する方法:- 親要素に
display: flex;
を指定すると、行内要素がフレックスコンテナとして配置されます。 justify-content
プロパティを使用して、行内要素の水平方向の配置方法を指定します。
- 親要素に
例:
.parent-element {
display: flex;
justify-content: center;
}
display: inline-block;
を使用する方法:- 行内要素に
display: inline-block;
を指定すると、要素がブロックレベルで表示され、水平方向に揃えることができます。
- 行内要素に
例:
.inline-element {
display: inline-block;
}
これらは、行内要素を揃えるための基本的な方法です。他にもさまざまなアラインメントテクニックがありますが、ここではシンプルな方法を紹介しました。必要に応じて、これらの方法を組み合わせたり、他のCSSプロパティや値を使用したりすることができます。