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

妙高Web屋

お仕事のご依頼お見積りのご依頼

Web制作

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

2018.3.8 2019.1.15

要素の中身次第で幅が変動する場合&[margin:0px auto;]が使えない場合でも左右中央寄せする方法【CSS3】
Web制作 0 0
妙高Web屋LINE@ 友だち追加

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

つまり「要素の幅が変動していても、[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;]を指定しています。

いかがでしょう??

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

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

ページの先頭へ戻る

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

こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。

この記事の感想を投稿する
妙高Web屋LINE@ 友だち追加
0 0

LINE@始めました!

妙高Web屋ではこのたび、LINE@(ラインアット)を始めることとなりました。

企業やお店のWeb担当者さまへ向けて、ホームページの運営・管理・更新に関する情報を発信していきます。

情報を購読できる「友だち」へのご登録は、下記のボタンよりお願いいたします。

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ