CSSのサンプル。display:tableを使った要素の中央揃えの可変対応のサンプル

code_css-display-table_001.md

##概要 状況に寄って表示する数が変わる要素を必ず中央に寄せる方法のサンプル。 たまにしか出番がなくてその他たびに調べるので忘備録として残しておく。

##HTML

<div class="_wp">
    <div class="block">
        <div class="_icon"></div>
        <div class="_icon"></div>
        <div class="_icon"></div>
    </div>
</div>

<div class="_wp">
    <div class="block">
        <div class="_icon"></div>
        <div class="_icon"></div>
    </div>
</div>

<div class="_wp">
    <div class="block">
        <div class="_icon"></div>
    </div>
</div>

##CSS

._wp {
    width: 200px;
    height: 30px;
    background-color: #006699;
}

._icon {
    float: left;
    width: 30px;
    height: 30px;
    background-color: red;
}

.block {
	display: table;
	margin-left: auto;
	margin-right: auto; 
}

##サンプル サンプルはこちら