リンクを中央に配置するには、次の 2 つの方法があります。
この記事では、リンクを中央に配置する両方の方法について説明します。それでは始めましょう！
方法 1: text-align プロパティを使用して CSS でリンクを中央に配置する
リンクを HTML の中央に配置するには、「 テキスト揃え 」CSSのプロパティ。 「 テキスト揃え 左揃え、右揃え、中央揃え、両端揃えなどのテキストの配置を調整するには、CSS の ” プロパティを使用します。
構文
text-align プロパティの構文は次のとおりです。
テキスト整列 : 価値
の場所で ' 価値 」では、左、右、中央、両端揃えなどのテキストの配置を設定できます。
ここで、「 テキスト整列 」を使用して、指定されたリンクを中央揃えにします。
例
リンクを Web ページの中央に配置するには、
タグ内に HTML でリンクを追加します。そのためには、 タグを使用してハイパーリンクを定義し、必要なサイトのアドレスを指定します。その後、リンクの名前を指定します。私たちの場合、Linuxhint Web サイトへのリンクを追加しました。HTML
< 体 >< a href = 「https://linuxhint.com/」 > Linux < / a >
< / 体 >
以下の画像は、デフォルトで左側に配置されているリンクが追加されたことを示しています。
CSS に移動して、リンクを中央に配置します。
ここでは、「 a 」をクリックして、追加されたリンクにアクセスします。その後、text-align の値を「 中心 」と表示され、「 ブロック 」。その結果、要素は新しい行から始まり、幅全体を占めるブロック要素として追加されます。
CSS
a {テキスト揃え : 中心 ;
画面 : ブロック ;
}
ノート： CSS の text-align プロパティだけでは、タグを中央に配置することはできません。したがって、「 画面 ” プロパティとその値の設定 “ ブロック 」をクリックして、リンクを中央に配置します。
次に、HTML に移動して実行し、次の結果を確認します。ここでは、リンクが Web ページの中央に配置されていることがわかります。
リンクを中央に揃える2番目の方法に移りましょう。
方法 2: 「margin」プロパティを使用して CSS でリンクを中央に配置する
CSS では、「 マージン 」プロパティは、リンクを中央に配置するために利用されます。 「」の短縮形です。 左マージン 」、「 右マージン 」、「 マージントップ '、 と ' マージンボトム ' プロパティ。指定されたすべてのプロパティの値を 1 行で設定できます。
構文
margin プロパティの構文は次のとおりです。
マージン : 自動 | | 上 右 下 左上記の構文の説明を以下に示します。
- 自動: ブラウザに応じて要素を設定するために使用されます。
- 上： 上からの余白の設定に使用します。
- 右： 右からのマージンを設定するために使用されます。
- ボタン： 下からの余白の設定に使用します。
- 左： 左からの余白を設定するために使用します。
ノート： 2 つの値を指定すると、上下の余白と左右の余白が示されます。ただし、値を 1 つ追加すると、マージンは 4 辺すべてに適用されます。
例に移りましょう。ここでは、「 マージン ' 財産。
例
最初に表示プロパティの値を「 ブロック 」と幅を「 70px 」。その後、margin プロパティを適用し、その値を「 自動 」：
a {画面 : ブロック ;
幅 : 70px ;
マージン : 自動 ;
}
ノート： 「 画面 ' と ' 幅 ” プロパティを設定する必要があります。それ以外の場合は、「 マージン 」プロパティは機能しません。 width プロパティの値は、表示画面の解像度とテキストの長さに応じて設定できます。
指定された画像から、リンクが正常に中央に配置されていることがわかります。
それでおしまい！リンクをセンタリングする方法を説明しました。
結論
「 テキスト揃え ' と ' マージン 」プロパティは、「 画面 ' と ' 幅 ' 財産。 display プロパティは text-align プロパティと共に必要です。margin プロパティを使用する場合、リンクを中央に配置するには、display プロパティと width プロパティの両方が必須です。このガイドでは、CSS でリンクを中央に配置するさまざまな方法について説明しました。