<li>タグの中でセンタリング

Question

<li class="item"><a href="">あいう</a><li> というふうにして、リストの中にリンク文字を入れているんですが、リストを横に並べたときに空間を揃えたくて、.item{ width:80;} と書いているんですが、こうすると、リストの横幅は揃うのですあが、リストの中のもじが左によってしまいます。 リストの中の文字をセンタリングするにはどうすればいいですか？

Answer 1

text-align:centerでどうぞ。

###追記
一度CSSの基本プロパティにどんなものがあるのかザッと見渡してみると良いですよ。
プロパティ一覧　参考サイト

Comments

[ryo-dev]

わかりました。

[aKusano]

>どこに適応させればいいですか？
text-alignはボックスの中身（テキストなど）を左寄せ／右寄せ／中央寄せするためのプロパティなので、今回のコードなら.item（li要素）に設定します。
CSSの基本文法や初歩的なルールを少し勉強するだけで、ぐっと自由に扱えるようになりますので、頑張ってください( ´∀｀)

[ryo-dev]

ちなみになんですが、<div>の中に<ul>が入っているんですが、<ul>をセンタリングするのに「text-align:center」は使えませんでした。他のものを使えばできますか？

[aKusano]

ul要素はブロックレベル（display:block;が初期値）の要素ですので、
text-aling:center;ではセンタリングできません。
ブロックレベルの要素の中に入っている中身（テキスト類）をセンタリングするのがtext-align:center;の役割なので。

ではブロックレベル要素自身をセンタリングするにはどうしたら良いか、というと、
いくつか方法はありますが、最も基本的なものは「左右のmarginにautoを設定する」ということになります。

このあたりはCSSの初歩的なルールになりますが、ネットでつまみ食いしているだけだとなかなか見つからないことも多いので、何か1つでいいので入門書などを一通り読んでみるなどしてみた方が早いと思います。

[ryo-dev]

やはり、marginでしたか、やってみたのですが、変化ないので諦めていたのですが・・・
<div>にmargin設定すればいいですかね？

[aKusano]

margin:auto;でボックスをセンタリングするには、そのボックスに幅が設定されていないといけないです。効かなかったときはそのボックスにwidthが設定されていなかったのでは？

divに設定するのかulに設定するのかについては、どちらのボックスを中央に配置したいのかによりますね。

[ryo-dev]

ul自体をdivの中にセンタリングしたいです。
https://hail2u.net/blog/webdesign/centering-floated-list.html
こちらのサイトを見ているんですが・・・さっぱりわかりません

[aKusano]

あー、そういうことですか。。。確かに、li要素をfloatで横に並べた上で、全体を中央に配置するのはかなり難しいです。（ここで説明するのが面倒臭い程度には。）なので、普通はわざわざこんな難解な方法で実装はしないですね。

参考サイトと同じような形のページナビゲーションを実装するなら、li要素の横並びにfloatを使うのではなく、li {display: inline-block;}を使うのが手っ取り早くて簡単ですよ。

ul {
text-align: center; /*中身を中央揃え*/
}
ul > li {
display: inline-block; /*li要素をインラインブロック化（text-alignが有効になる）*/
width: 80px;
}
ul > li > a {
display: block; /*a要素のブロック化（li要素の幅いっぱいまでリンク領域が拡大）*/
}

あとはliやa要素に好きな色とか線とか設定すればOKです。
HTMLの要素がどのような形でブラウザ上に配置されるのか、ということは
基本的にdisplayプロパティで定義されています。
各要素にはそれぞれdisplayプロパティの初期値が決められていて、マークアップした最初の段階である程度どのように画面上に表示されるのかその特性が決まるのですが、
それはCSSで後から自由に変更できるのです。

CSSのレイアウトでは各要素がどのようなdisplayプロパティの初期値を持っていて、
それぞれがどのような表示特性を持っているのかを把握した上で、
作りたいレイアウトに合わせて適宜その値を変更する、ということを頻繁に行います。

displayプロパティの理解は、CSSでレイアウトする上で必須といえる知識なので、
よく調べてみると良いと思います。

[ryo-dev]

ありがとうございました。