HTMLで<a>要素のリンクを中央寄せする方法

投稿日：2021年5月10日更新日：2021年4月26日

＜目次＞

(１) HTMLで<a>要素のリンクを中央寄せする方法
　 (１-１) 構文
　 (１-２) サンプルプログラム
　 (１-３) サンプルプログラム実行結果

(１) HTMLで<a>要素のリンクを中央寄せする方法

(１-１) 構文

●css

「div」セレクタに「center」というクラス（HTML側のclass=”XXX”で指定する名前）を定義し、プロパティ「text-align」の値を「center」に指定する事で、div要素を使った中央寄せを実現します。

div.center {text-align: center;}

（参考）

今回は「div.center」としていますが、理由は「div」のみだと中央寄せが全ての<div>要素に適用されてしまうためです。divセレクタのcenterクラスを用意する事で、明示的に「class=”center”」を指定した<div>要素にのみ、中央寄せが適用されるようにしています。

＞目次にもどる

●HTML

中央寄せしたいリンク「<a href></a>」を<div>要素で囲み、そのdiv要素内でcssのクラス「center」を指定します。

<div class=”center”><a href=”[リンク先パス]”>[リンクに表示するテキスト]</a></div>

＞目次にもどる

(１-２) サンプルプログラム

上記の構文を使って、動作する簡単なプログラムの例をご紹介します。

●css

（サンプル）

@CHARSET “UTF-8”;
div.center {text-align: center;}

（図１２１）

＞目次にもどる

●HTML

HTML側ではcssをインポートするために<link>要素でスタイルシートの読み込みを行います。

<link rel="stylesheet" type="text/css" href="css/Sample.css">

（サンプル）

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html class="font_1">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/Sample.css">
<title>Form認証(MemoryRealm) ログアウト</title>
</head>
<body>
<div class="center">ログアウトしました。</div>
<div class="center"><a href="./form_auth/AfterLogin1.jsp">→ログインページへ戻る</a></div>
</body>
</html>

（図１２２）