新潟県妙高市|ホームページと広告の相談相手

MENU [+]閉じる [×]
要素の中身次第で幅が変動する場合&[margin:0px auto;]が使えない場合でも左右中央寄せする方法【CSS3】

先日、「要素の幅が変動しても左右中央寄せする方法」を、こちらの記事でご紹介しました。

つまり「要素の幅が変動していても、[margin:0px auto;]を使って左右中央に寄せる方法はありますよ」というもの。

では、[margin:0px auto;]さえ使えない状況に直面したとしたら…?

今回は「要素の中身次第で幅が変動する場合&[margin:0px auto;]が使えない場合でも左右中央寄せする方法」についてのご紹介です(^^)

この記事の目次

[前提]そもそも、どんな状況で有効なのか!?

今回ご紹介する「要素の中身次第で幅が変動する場合&[margin:0px auto;]が使えない場合でも左右中央寄せする方法」は、どんな場合に有効なのかを、まずご説明します。

結論としては、有効なのは例えば「ページ送り」のリストを表示する場合です。

WordPressでも「wp-pagenavi」のプラグインがありますよね?

それらはHTMLタグを見てみると、ulタグ&liタグという、リスト系のタグで組まれていることが多くあります。

また、ページ送りですので、記事の件数によって変動しますし、特に、時間をかけて記事が増えていくと、ページ送りの件数(ナンバー)もどんどん大きくなっていきます。

それはつまり、記事の件数に応じてページ送りのリストの幅が変動するとも言えます。

なおかつ、[margin:0px auto;]でも左右中央に寄せられない場合も発生する可能性があります。

今回の記事では、そのような場合に対応する方法のご紹介をしたいと思います。

ページの先頭へ戻る

【結論】要素の幅が可変&[margin:0px auto;]不可の場合の左右中央寄せの方法

「要素の中身次第で幅が変動する場合&[margin:0px auto;]が使えない場合でも左右中央寄せする方法」のHTMLの記述は、こちらです。

<div class="wrap">
<ul class="className">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>

リストのタグを[wrap]というクラス名のdivタグで包んでいるイメージです。

必要に応じて、liタグやaタグへのクラス名の付加はご自由にどうぞ(^^)

続きまして、こちらがCSSの記述です。

.wrap {
	text-align: center;
}
.className {
	display: inline-block;
}

うまくいけば、上記のHTML&CSSの組み合わせで、幅が可変の要素も[margin:0px auto;]無しで左右中央に配置できたかと思います。

ページの先頭へ戻る

[詳細]divタグで包んで[text-align:center;]左右中央配置!

上記のコードの意味について、少しだけ触れておきます。

まず、[wrap]のクラス名をつけたdivタグで[text-align: center;]を指定しています。

これによって、このタグ内のテキストが左右中央配置になります。

また、「テキストを左右中央配置する(でもulタグ以下の定義は崩したくない)」という場合に対応するため、リストのulタグに[display: inline-block;]を指定しています。

いかがでしょう??

目的の要素は、無事に左右中央に配置できたでしょうか?

この方法を試しても無理だったという場合は、こちらの記事の感想フォーム、または当サイトのお問い合わせフォームからご連絡ください。

ページの先頭へ戻る

メールマガジンで最新情報をゲット!

当サイトの更新情報は、メールマガジンでもお知らせしております。
「思い出のカレンダー制作」に関する情報もあわせてどうぞ。

メールアドレスを入力してください

この記事の感想をお寄せください

[要素の中身次第で幅が変動する場合&[margin:0px auto;]が使えない場合でも左右中央寄せする方法【CSS3】]の感想を、下記のリンク先の「感想投稿フォーム」よりお気軽にお寄せください。
メールアドレスは不要です。

感想投稿フォームへ

関連記事一覧:要素の中身次第で幅が変動する場合&[margin:0px auto;]が使えない場合でも左右中央寄せする方法【CSS3】

ホームページのコーディングをしている皆さんは、要素を中央寄せにしたい場合は、どんなコードを書かれていますか? 例えばテキストを画面の、あるいはエリアの中央 …… 続きを読む

ホームページ制作をしていると、フォームの項目の一つで「チェックボックス」というものを扱う機会はあるかと思います。 また、チェックボックスを含むフォーム関連 …… 続きを読む

ホームページ制作において、デザイン修正は様々な場面で発生することがあります。 文言を変更したい場合や、要素の並びを部分的に入れ替えたい場合など、状況に応じ …… 続きを読む

皆さんは、ホームページのデザインを、どのページから始めるのが良いか、お考えになったことはありますか? もちろん、すべての場合に当てはまる正解などありません …… 続きを読む

Copyright (C) 妙高Web屋 All Rights Reserved.