cssを使用してdivとspanを垂直に配置します

Question

jsfiddleプロジェクトhereを参照してください。ボックスとラベルを水平に並べる方法は？

.box { 
 
    display: inline-block; 
 
    height: 20px; 
 
    width: 30px; 
 
    border: 1px solid; 
 
} 
 

 
.legend { 
 
    horizontal-align: middle; 
 
}

<div class="legend"> 
 
    <div class="box" style="background-color: red;"> 
 
    </div> 
 
    <span>Alabama</span> 
 
</div>

Answer 1

あなたは代わりにインラインで表示するのボックスをフロートすることができます。これらを整列させるには、いくつかの異なる方法があります。

https://jsfiddle.net/cckxkvov/5/

.box { 
    float: left; 
    height: 20px; 
    width: 30px; 
    border: 1px solid; 
} 

.legend { 
    horizontal-align: middle; 
} 

span { 
    display: inline-block; 
    line-height: 20px; 
} 

Answer 2

なぜフレキシボックスを使用していませんか？

あなたは垂直だけでこれらのスタイルを適用し、その後.legend内の2つのアイテムを揃えるしようとしている場合：

.legend { 
    display: flex; 
    align-items: center; 
} 

あなたはクロスブラウザの互換性のためにプレフィックスを適用する必要があります覚えておいてください。

Answer 3

.box divのプロパティーをvertical-alignに設定するのが最も理にかなっており、問題が最も少ないようです。

.box { 
 
    display: inline-block; 
 
    height: 20px; 
 
    width: 30px; 
 
    border: 1px solid; 
 
    vertical-align: middle; 
 
}

<div class="legend"> 
 
    <div class="box" style="background-color: red;"> 
 
    </div> 
 
    <span>Alabama</span> 
 
</div>

Answer 4

私はあなたが揃え垂直意味と仮定？あなたが単純に垂直に整列させようとしているのであれば、等しくない高さの2つのdivを表示してください：inline-blockは最も簡単で最も効果的な方法です。あなたはほとんどあなたのコードでそれを持っていたが、浮動小数点はそれを壊す。フロートを使用しないでください！

.box { 
 
    background-color: red; 
 
    border: 1px solid; 
 
    height: 20px; 
 
    width: 30px; 
 
} 
 

 
.box, 
 
.legend { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<div class="box"></div> 
 
    <div class="legend">Alabama</div>

enter link description here