CSSパーツのセンタリング

質問

こんにちは。
ホームページを作るうえで詰まってしまったので質問させていただきます。

http://myisland.jp/template/menus/horizontal_jq1.html

の素材をダウンロードし、設置まではできたのですが、センタリングのしかたがわかりません。
CSSに関してあまり知識がないのでそこがまず問題ですが…
いろいろと調べて試したのですがやり方がわからず困っています。

回答のほうよろしくお願いします。

回答No.1

ORUKA1951 · ベストアンサー

スタイルシートは
ul#menu-jq1 {
＿clear: both;
＿float: left;
＿font-size: 1em;
＿list-style: none outside none;
＿margin: 6px 0 20px;
＿padding: 0;
＿width: 100%;
}
ul#menu-jq1 li {
＿float: left;
＿height: 32px;
＿margin: 0;
＿overflow: hidden;
＿padding: 0;
}
ですね。
ul#menu-jq1に対して、float:leftが指定してあるので左によります。
floatさせずに、通常に配置しましょう。
ただ、リストの数と巾をきちんと計算して、おかなければなりません。逆にHTMLの方を、
<ul id="menu-jq1">
<li><a href="#">SAMPLE</a></li><!--
--><li><a href="#">SAMPLE</a></li><!--
--><li><a href="#">SAMPLE</a></li><!--
--><li><a href="#">SAMPLE</a></li><!--
--><li><a href="#">SAMPLE</a></li><!--
--><li><a href="#">SAMPLE</a></li>
</ul>
と書き直して、display:inline-block;として、ul#menu-jq1をtext-align:centerとするほうがスマートですかね。

自分で使うなら、文書構造から
<div class="nav">
<ul class="nav" id="menu-jq1">
<li><a href="#">SAMPLE</a></li><!--
--><li><a href="#">SAMPLE</a></li><!--
--><li><a href="#">SAMPLE</a></li><!--
--><li><a href="#">SAMPLE</a></li><!--
--><li><a href="#">SAMPLE</a></li><!--
--><li><a href="#">SAMPLE</a></li>
</ul>
ul.nav{
＿width:100%;height:32px;
＿text-align:center;
＿font-size: 1em;
＿list-style: none;
＿margin: 6px 0 20px;
＿padding: 0;
}
ul.nav li {
＿display:inline-block;
＿height: 32px;
＿margin: 0;
＿overflow: hidden;
＿padding: 0;
}
かな？

回答No.2

tracer

HTML/CSSの基本的なことはほぼWEB上で見つけることができます。
調べて分からないということは、検索の方法がよくないか、HTML/CSSを理解する知識がない(たとえばパソコンの基本操作)かのどちらかだと思います。どこまでは分かって、どこからがわからないということが分かれば、的確な回答が得られるかもしれませんね。

補足

パソコンの基本操作ができないのにhtmlやCSSをやると？

なにを言っているのか。

当方プログラミングもCGもやっています。

WEBに挑戦しようとしているところ、そのような言い方をされたくないですね。

ちなみに自分で調べたところ
margin auto 0がきかなかったので質問させていただいてるだけです。