Rainbow Engine

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

HTML/css Java JSP/Servlet

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

投稿日:2021年5月10日 更新日:

<目次>

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

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

(1-1) 構文

●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>

目次にもどる

(1-2) サンプルプログラム

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

●css

(サンプル)

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

目次にもどる

●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>
(図122)
 

目次にもどる

(1-3) サンプルプログラム実行結果

●Before

「text-align: center;」が効いていないため、文字が左に寄っています。

(図123)
 

目次にもどる

●After

(図124)

目次にもどる

●操作動画

上記でイメージが掴みにくい場合、ご参考に修正⇒反映確認の動画を掲載します(※div要素にclass=”center”を追記して保存して、中央寄せに変化する様子を確認しているだけです)。

目次にもどる

Adsense審査用広告コード


Adsense審査用広告コード


-HTML/css, Java, JSP/Servlet

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

JSPでcssが適用されない(Resouce interpreted as Stylesheet but transferred with MIME type)事象のトラブルシューティング記録

<目次> (1) JSPでcssが適用されない(Resouce interpreted as Stylesheet but transferred with MIME type)事象のトラブルシューテ …

JavaのJDBC接続でjava.sql.SQLRecoverableException: Closed Connectionが発生した時の解決メモ

(0)目次&概説 (1) エラー事象の概要  (1-1) エラーの発生状況  (1-2) エラーメッセージ全文 (2) エラーの原因 (3) エラーの対処方法  (3-1) エラーの修正内容  (3- …

Javaで日付を整形する方法について

<目次> (1) Javaで日付を整形する方法について  (1-1) 構文  (1-2) サンプルプログラム (1) Javaで日付を整形する方法について 日付を扱っていて、例えば「Thu Dec 1 …

Javaの型とは?ジェネリクスの基本や使い方をご紹介

<目次> (1) Javaの型とは?ジェネリクスの基本や使い方をご紹介  (1-1) <T>とは?ジェネリクスとは?  (1-2) ジェネリクスを使う利点  (1-3) ジェネリクスをクラ …

JavaのBigDecimalの使い方+初期化・四則演算・余り・累乗等の主要用途も紹介

<目的> (1) JavaのBigDecimalの使い方+初期化や四則演算・桁数設定等の主要用途も紹介  (1-1) 宣言の方法  (1-2) 代表的な用途(足し算・引き算・掛け算・割り算)  (1- …

  • English (United States)
  • 日本語
Top