block要素を使ったものに対してのセンタリング

質問

CSSにて、メニューボタンなどに文字をのせて表示するときに、
1行だとpaddingで制御した結果、センタリングされるのですが、2行以上になる1行を基準にした位置から下に配置されてしまいます。

vertical-aglinを使ってみようとしましたが、block要素を使っている場合、利用できないようです。

#aaa #test1 li a {
display:block;
height:40px;
padding:14px 5px 0 48px;
}

何かアドバイスがありましたら、お教えいただければ幸いです。

よろしくお願いします。

回答No.2

ORUKA1951

#aaa #test1 li a と言う書き方は通常はしません。HTML自体、そんなidを乱発する必要はありません。

　質問の意味がわかりません。
＞1行だとpaddingで制御した結果、センタリングされるのですが、2行以上になる1行を基準にした位置から下に配置されてしまいます。
　センタリングとは左右の中央と言う意味です。しかし、質問文の中にはvertical-aglinと言うプロパティがでてきますが、vertical-aglinは縦方向の配置を指定します。

　なお、table-cell以外に、縦方向を制御する方法はCSS3にもありません。

お礼

ご回答ありがとうございます。
＞#aaa #test1 li a と言う書き方は通常はしません。
そうなんですね、今までのソースではよくみかけたので普通なのかと思っていました・・

失礼しました。、縦方向に中央に配置したかったのです。
tabele-cell以外には縦方向制御はできないんですね。
スマホサイト用なので、display=blockをどうしても使わないとだめなようだったので、vertical-aglin以外にも方法があればよいのですが。

大変、参考になりました。ありがとうございます。

回答No.1

xiaodie

こんにちは。
お役に立てなかったらごめんなさい。

まず、html側はこんな感じでしょうか？

<div id="aaa">
<ul id="test1#>
<li><a href="#">text</a></li>
..................................
</ul>
</div>

display: block よりも display:table-cell 遣ってみては如何でしょうか？
そうすると vertical-align も使えますし、左右にもセンタりングしたければ text-align: center; で行けますよね？
こつとしては、table-cell を使用したときに、a の高さと幅を決めうちすることです。
それで vertical-align : middle; で上下中央にはなります。
（このとき、上下のパディングは指定しない）

ちょっと試してみてください。

お礼

ご回答ありがとうございます！

ただ、スマホ対応で、どうしてもdisplay=blocckを使わないとだめなようなのです。

あと、リストにアイコン画像が配置されていたり、うまくいきませんでした。

応用力があればよいのですが、知識がなさすぎで、すみません。

補足

#aaa #test1 li {
float:left;
width:50%;
height:50px;
margin:0;
padding:0;
text-align:left;
line-height:1.2;
background: url(../images/bbb.jpg) no-repeat;
}

#aaa #test1 li a {
display:block;
height:40px;
padding:14px 5px 0 48px;
}

■html■
<div class="section" id="contents">
<ul id="test1">
<li id="off1-1"><a href="aaa.html">aaa</a></li>
<li id="off2-2"><a href="bbb.html">bbb</a></li>
<li id="off1-3"><a href="ccc.html">ccc</a></li>
・
　　　　・
</ul>
</div>