HTML で複数のリンクを中央に配置

この記事では、1つまたは複数の HTML リンクを中央に配置する方法を説明します。 HTML では、<a> タグを使用してリンクを作成し、URL を src 属性に割り当てることができます。

<center> HTML タグを使用して複数の HTML リンクを中央に配置する

HTML で要素を中央に配置する最も簡単な方法は、<center> タグです。 中央に表示する必要がある <center> </center> タグ内にすべての要素を配置できます。

たとえば、4つのリンクを作成し、それらを <center> タグ内に挿入して中央に表示しました。

HTML コード:

<center>
    <a  href="#">About Us</a>
    <a  href="#">Contact Us</a>
    <a  href="#">HTML</a>
    <a  href="#">CSS</a>
</center>

上記の出力では、すべてのリンクが Web ページの中央に表示されていることがわかります。

text-align: center CSS プロパティを使用して複数の HTML リンクを中央に配置する

CSS の text-align プロパティを使用して、HTML 要素を中央に配置することもできます。

以下の例では、4つのリンクを作成し、それらを <div> 要素内に追加しています。 次に、text-align: center CSS プロパティを <div> 要素に適用しました。これにより、すべての <div> 要素が中央揃えになります。

HTML コード:

<div>
    <a  href="#">Link 1</a>
    <a  href="#">Link 2</a>
    <a  href="#">Link 3</a>
    <a  href="#">Link 4</a>
</div>

CSS コード:

div{
    text-align: center;
}

ユーザーがすべてのリンクを 1 行ずつ 1 列に表示したい場合は、<div> 要素のスタイルに display: flex および flex-direction: column CSS プロパティを追加できます。

HTML コード:

<div>
    <a  href="#">Link 1</a>
    <a  href="#">Link 2</a>
    <a  href="#">Link 3</a>
    <a  href="#">Link 4</a>
</div>

CSS コード:

div{
    display: flex;
    flex-direction: column;
    text-align: center;
}

上記の出力では、すべてのリンクが 1つの列に表示され、その列が画面の中央に表示されていることがわかります。