リストタグ以外でfloatしたものをセンター寄せに

質問

下記のようにHTMLを組みました。
「.footerNav」を「float:left」して横並びにした上でセンター寄せをしたいと思いました。
しかし何をどうやってもセンター寄せになってくれません。
ちなみに各「div class="footerInner"」の幅設定はしません。

<footer>
<nav>
<div class="footerInner">
<h4>○○○</h4>
<ul class="XXXXX">
<li><a href="#">○○○</a></li>
<li><a href="#">○○○</a></li>
<li><a href="#">○○○</a></li>
</ul>
</div>

<div class="footerInner">
<h4>○○○</h4>
<ul class="XXXXX">
<li><a href="#">○○○</a></li>
<li><a href="#">○○○</a></li>
<li><a href="#">○○○</a></li>
</ul>
</div>

<div class="footerInner">
<h4>○○○</h4>
<ul class="XXXXX">
<li><a href="#">○○○</a></li>
<li><a href="#">○○○</a></li>
<li><a href="#">○○○</a></li>
</ul>
</div>
</nav>
</footer>

調べて見ると、<div class="footerInner">～</div>の単体であれば、
センター寄せができる手段はありました。

<div class="footerInner">
<h4>○○○</h4>
<ul class="XXXXX">
<li><a href="#">○○○</a></li>
<li><a href="#">○○○</a></li>
<li><a href="#">○○○</a></li>
</ul>
</div>

しかし自分のはリストタグではなく、divタグをフロートしたもの。
リストタグではないものを「float:left」してセンタリングは可能なのでしょうか？
何度かこの手のことにはまって、その度にいろいろな手段を試したり検索していたのですが、
検索しても見つからず、結局出来たためしがありません。

それで今回は投稿させていただきました。
ご存知の方いらっしゃいましたらご教授いただければ幸いです。

回答No.2

ORUKA1951 · ベストアンサー

footer要素内のナビゲーションはnavを使わないほうが良いのですが・・・
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
NOTE:Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.4 Sections — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/sections.html#the-nav-element )］より
意訳すると
『ページ上のリンクのすべてのグループがナビゲーション要素にする必要がありません この要素は、主に主要なナビゲーション·ブロックで構成されているセクションを対象としています。フッター自身に、著作権ページやサイ​​ト内のさまざまなページへのリンクの短いリストを持っているのが一般的ですから、フッター要素であることで十分であるので、NAV要素を使うことは出来ますが、それは通常不要である。』
　footer自体に、NAVの意味を持っているので、屋上屋を重ねる形になるNAVで囲う必要はないということです。

　たとえば、
<footer>
　<ol>
　　<li>あ行
　　　<ol>
　　　　<li><a href="">あ</a></li>
　　　　<li><a href="">い</a></li>
　　　　<li><a href="">う</a></li>
　　　</ol>
　　</li>
　　<li>か行
　　　<ol>
　　　　<li><a href="">か</a></li>
　　　　<li><a href="">き</a></li>
　　　　<li><a href="">く</a></li>
　　　</ol>
　　</li>
　　<li>さ行
　　　<ol>
　　　　<li><a href="">さ</a></li>
　　　　<li><a href="">し</a></li>
　　　　<li><a href="">す</a></li>
　　　</ol>
　　</li>
　</ol>
</footer>
で、十分です。
もちろん、どうしてもならあなたのマークアップでも良いです。
※footerinerのようなclass名ではなく、文書構造を示す物の法が良いです。

★3つのブロックを並べる方法はたくさんありますが、floatは本来は画像などの周囲にテキストを回りこませるためのものでこの様な場合は使用しません。
　例えば、上記でしたら
footer ol{
list-style-type:none;
padding:0;
width:100%;margin:5px auto;
text-align:center;
}
footer ol li{
display:inline-block;
width:28%;
margin:0;padding:0;
}
footer ol li ol li{display:block;width:100%;}
/* 分かりやすいように色分け */
footer ol li{background-color:yellow;}
footer ol li ol li{background-color:lime;}

だけでよいです。これは、あなたのようにDIVで行った場合も同じです。
display:inline-blockを利用できないブラウザへの後方互換を考えるなら、absoluteなりを使っても良いでしょう。
floatは、取り扱いも厄介なので使わないほうが無難です。

次のように付け加えてもよいかも。
footer ol li a{display:block;width:100%;height:100%;text-decoration:none;}
footer ol li{position:relative;line-height:30px;}
footer ol li ol{display:none;}
footer ol li ol{position:absolute;bottom:20px;}
footer ol li:hover ol{display:block;}

お礼

言葉足らずにもかかわらず、こちらの意図を推測していただいた上でのご回答、とても参考になりました。これを基に書き直そうと思います。ありがとうございました。

回答No.3

ORUKA1951

ちなみに
<footer>
　<div class="linksList">
　　<div class="savList">
　　　<h2>あ行</h2>
　　　<ol>
　　　　<li><a href="">あ</a></li>
　　　　<li><a href="">い</a></li>
　　　　<li><a href="">う</a></li>
　　　</ol>
　　</div>
　　<div class="sabList">
　　　<h2>か行</h2>
　　　<ol>
　　　　<li><a href="">か</a></li>
　　　　<li><a href="">き</a></li>
　　　　<li><a href="">く</a></li>
　　　</ol>
　　</div>
　　<div class="sabList">
　　　<h2>さ行</h2>
　　　<ol>
　　　　<li><a href="">さ</a></li>
　　　　<li><a href="">し</a></li>
　　　　<li><a href="">す</a></li>
　　　</ol>
　　</div>
　</div>
</footer>
でしたら
footer div.linksList{
display:block;
text-align:center;
}
footer div.linkList div{
display:inline-block;
width:28%;
margin:0;padding:0;
}
footer div.linkList ol,
footer div.linkList ol li{
display:block;
margin:0;padding:0;
}
とかですかね。
　比較したら分かるように、SEO的にも文書構造からしても圧倒的に先のほうが優れています。

回答No.1

tkmojo

＞ 「.footerNav」を「float:left」して横並びにした上でセンター寄せをしたいと思いました。
とありますが、ソース内に class="footerNav" が無いので、質問の意味がよくわからず、
何を回り込みさせたくて、どの範囲をセンター寄せしたいのか不明です。

リストタグかどうかは関係なく、ブロックレベル要素なのかインライン要素なのかで全てが決定されます。
<li>と<div>や<p>の挙動は全て同じですので、liで出来てdivで出来ないものはありません。

なお、（横方向の）センター寄せと言うと
マージン左右にautoを指定するのとtext-align:center;を指定する二つの意味がありますが
どちらが目的でしょうか？
前者はボックス自体が中央に配置され、text-align:center;はボックス内の文字や画像が中央寄せになります。
前者を使いたいのなら、ボックスに横幅を指定しないと有効になりません。

お礼

ご回答ありがとうございました。
言葉足らずの質問で申し訳ありませんでした。