CSS:ulのリストをfloatで並べて中央揃えする方法

ulタグfloatし、横に並べて表示することはよくあります。

css_float1

ページャーナビゲーションなどで使用することが多いと思いますが、
ulで作ったリストを中央揃えセンタリング)をしようとした時に「margin: 0 auto;」などではセンタリングできなかったので、
floatで並べたリストを中央揃えにする方法をメモします。

また、表示する幅が固定の場合は「margin: 0 auto;」で中央揃えにすることが可能です。


floatで並べたリストを中央揃えにする

「position: relative;」を使用し、位置をしています。
ulのリストを50%右に移動し、liを50%左に移動させることでセンタリングが可能になるようです。

CSS

<style type="text/css">
.list {
    border: 1px solid #CCC;
    padding: 10px;
    overflow: hidden;
    position: relative;
}
.list ul {
    list-style: none outside none;
    float: left;
    margin: 0 0 0 0;
    padding: 0;
    position: relative;
    left: 50%;
}
.list ul li {
    float: left;
    margin-right: 5px;
    padding: 5px;
    border: 1px solid #999;
    position: relative;
    left: -50%;
}
</style>

HTML

<div class="list">
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ul>
</div>

修正前

css_float2


修正後

css_float1


参考サイト

floatで並べたリストのセンタリング – Weblog – hail2u.net

HTML:HTMLで並べた画像の余白を取り除く方法

HTMLで画像を並べて表示しようとしたのですが、画像と画像の間に余白が入ってしまい、ぴったりくっつかないということがありました。

image_yohaku_1

その時のHTMLのソースコードは以下のように記述しています。

<img src="image_1.jpg" />
<img src="image_2.jpg" />

調べてみるとソースコード内で<img>タグを改行して記述していたり、半角のハイフンなどが入っていると画像の間に余白が入ってしまうようです。

なので、画像の間の余白を取り除く場合の解決策をメモします。


■ 並べた画像の余白を取り除く方法

ソース内で<img>タグの間に改行や空白を入れないで記述した場合、余白はできないので下記のように記述します。

<img src="image_1.jpg" /><img src="image_2.jpg" />

また、ソース内の記述を見やすくするために改行したり空白を入れたい場合があります。
その場合は画像に「float: left;」を指定し余白をなくします。

<img src="image_1.jpg" style="float: left;" />
<img src="image_2.jpg" style="float: left;" />

上記の方法を使用すると下記のように複数の画像がぴったりくっついて表示されます

image_yohaku_2