今見てくれてる人の数

ホンキートンク・スーダラブルース

ゆるコラム、oF、邦ロックや歌謡曲、小説の感想。ドラクエ、JavaScript、ドラゴンボール超など。湘南あたりを転がってる石コロのゆるゆる生きてく超雑多な軌跡です。

display: table;が便利! 子要素を整列しつつフロートしたい時。

f:id:sudara_bluse:20171010023946p:plain

display:table が便利なのでメモです!
ie8以上対応だし。

普段はフロートを使用しているけど、
アイコンなど子要素を上下や左右中央揃えなど
整列しつつフロートしたい時などに重宝します。

 1,基本形

スクリーンショット 2015-12-21 16.23.01.png

親にdisplay: table;
子(セル)にdisplay: table-cell;
が基本です!

vertical-align: middle;  /* この指定で上下中央揃え */

<div class="table">
    <p class="cell">
        <img src="img1.png">
    </p>
    <p class="cell">
        <img src="img1.png">
    </p>
    <p class="cell">
        <img src="img1.png">
    </p>
</div>
<style>
.table{
    width: 500px;
    display: table;
    /* 隣接するセルのボーダーを重ねて表示します。*/
    border-collapse: collapse; 
}
.cell{
    display: table-cell;
    padding: 10px;
    border: 1px solid #333;
    text-align: center;     /* この指定で左右中央揃え */
    vertical-align: middle; /* この指定で上下中央 */
}
</style>

 2、特定のセルのサイズ固定したい

完成図

スクリーンショット 2015-12-21 17.16.53.png

親の500pxに対して
最初のセルだけ250pxと指定すると
そこは確保され、あとは均等に配分されます。

<div class="table">
    <p class="cell first_cell">
        <img src="img1.png">
    </p>
    <p class="cell">
        <img src="img1.png">
    </p>
    <p class="cell">
        <img src="img1.png">
    </p>
</div>
<style>
.table{
    width: 500px;
    display: table;
    border-collapse: collapse;
}
.cell{
    display: table-cell;
    padding: 10px;
    border: 1px solid #333;
    text-align: center;     /* この指定で左右中央揃え */
    vertical-align: middle; /* この指定で上下中央 */
}
.first_cell{
    width: 250px;
}
</style>

 3、子要素の内容が違えど、幅を揃えたい

スクリーンショット 2015-12-21 17.18.39.png

display: table;を設定した親に、
table-layout:fixed; を指定
でいけました。

<div class="table">
    <p class="cell">
        <img src="img1.png"><br>
        あああああああああああああああああああああ
    </p>
    <p class="cell">
        <img src="img1.png">
    </p>
    <p class="cell">
        <img src="img1.png">
    </p>
</div>
<style>
.table{
    width: 500px;
    display: table;
    border-collapse: collapse;
    table-layout:fixed; /* これが肝 */
}
.cell{
    display: table-cell;
    padding: 10px;
    border: 1px solid #333;
    text-align: center;     /* この指定で左右中央揃え */
    vertical-align: middle; /* この指定で上下中央 */
}
</style>

参考 [CSS] display:tableを学ぶ
http://www.yoheim.net/blog.php?q=20150102