ここから本文です

ulは横幅を指定しないと中央寄せできないのでしょうか?

acl********さん

2011/1/516:46:42

ulは横幅を指定しないと中央寄せできないのでしょうか?

fc2ブログなんですが、2カラムのメインの方、最新記事の上にulを使ったリストを挿入しました。
<ul>文字<br>文字<br>文字<br>文字</ul> のような状態で特に凝ったことはしていません。
これを中央に寄せたいです。

現在使っているテンプレートの、ウィンドウの横幅を変えても横スクロールバーが出ず文章の改行位置が変わる(横幅が指定されていない?)デザインが好きなので、横幅を指定して左右マージンautoで中央寄せという方法は使いたくありません。
ulもテンプレートデザインと同じく、ウィンドウの横幅を変えた時に動くような設定が良いのです。

cssは詳しくなくコピペ中心で、英単語の意味から要素の内容を予測して組み立てたり外したりくらい。
今回もいじってみましたがよくわかりませんでした。
今は左マージンをパーセント指定にして誤魔化しています。

横幅指定せずにulの中央寄せをする方法はありますか?
htmlで考えるならulをテーブルに入れてテーブルごと中央寄せ等にするしかないのでしょうか。

補足すみません、書き忘れてました・・・。
centerで真中にすると凸凹になるので、頭を揃えたまま中央に寄せたいんです。

..サンプル文字
..........文字
........文字列

↓ではなくて

.....サンプル文字
.....文字
.....文字列

といったように・・・。

閲覧数:
5,976
回答数:
2

違反報告

ベストアンサーに選ばれた回答

sit********さん

編集あり2011/1/521:29:23

>ulは横幅を指定しないと中央寄せできないのでしょうか?
ブロック要素はデフォルトがwidth:100%ですから。

>ウィンドウの横幅を変えても横スクロールバーが出ず文章の改行位置が変わる(横幅が指定されていない?)デザインが好きなので、横幅を指定して左右マージンautoで中央寄せという方法は使いたくありません。

<ul>(<ul>の親要素)の横幅を%指定すればよいだけでは?

widthは固定せず、余白を固定したいなら、左右marginをpxなど固定幅で指定すれば中央寄せですし、
左右marginを%で同数値指定すれば余白幅可変で中央寄せですよ。

例1:ulの横幅が60%で中央寄せ
<ul stle="background:#cccccc; width:60%; margin:auto;">
例2:左右余白を50pxとり、残り幅がul(左右が同じ幅なので中央寄せ)
<ul stle="background:#cccccc; margin:auto 50px;">
例3:左右余白を20%とった残り幅がul(左右が同じ幅なので中央寄せ)
<ul stle="background:#cccccc; margin:auto 20%;">

質問した人からのコメント

2011/1/5 22:47:09

感謝 右側も%指定すればよかったんですね!
ぴったり理想通りとは行きませんでしたが、ほぼ気にならないところまでできました。ありがとうございました。

ベストアンサー以外の回答

1〜1件/1件中

rio********さん

編集あり2011/1/518:52:57

width 指定しなければ width は親要素のパディング辺になりますので、中央寄せしても margin が 0 です。

<div style="border: solid 1px blue;"><ul style="margin: 0 auto; background-color: #efe;"><li>hoge</li><li>hogehoge</li><li>hogehogehoge</li></ul></div>

margin を指定すれば中央寄せっぽくはなりますが、width に期待することは何ですか?

<div style="border: solid 1px blue;"><ul style="margin: 0 3em; background-color: #efe;"><li>hoge</li><li>hogehoge</li><li>hogehogehoge</li></ul></div>

# Re: aclie_liddlleさん

あわせて知りたい

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる