インラインブロック要素の位置が1行で間違った垂直位置にある理由

Question

インラインブロック要素（14x14px）を単一行の行（高さと行高= 20px）に配置すると、それは親（垂直）です。 Line-height problem picture

はここСodepen example

HTML

<div class="status status_success"> Success</div> 
<div class="status status_busy"> Busy</div> 
<div class="status status_missed"> Missed</div> 

CSS

body { 
    font-size: 16px; 
    line-height: 20px; 
} 

.status { 
    position: relative; 
    display: block; 
    white-space: nowrap; 
    border: 1px solid #000; // block border for helping test 
    margin: 0 0 20px; 

    &:before { 
    content: ''; 
    display: inline-block; 
    vertical-align: middle; 
    width: 14px; 
    height: 14px; 
    background-color: #d6d6d6; 
    border-radius: 50%; 
    } 
} 

は、なぜそれが起こっている、私にしてください伝えるのか？

Answer 1

vertical-align: middleは、単に垂直配向は、その親の正確な中央に素子を配置する100％正確な方法ではないことを意味親に小文字の中央と素子の中央を揃え。

のSrc：以下のサンプルでhttps://css-tricks.com/almanac/properties/v/vertical-align/

私はラッパーを追加（およびスパンの2：番目のサンプル、擬似のサイズに一致するフォントサイズで）、彼らがどのように相互作用するかを示すために、あなたは結果を見て作るために何ができますかより良い。

注：「Vangel Tzo」が提案するように、flexは仕事をより良くする方法の1つです。

.wrap { 
 
    padding: 20px; 
 
    font-size: 16px; 
 
    font-family: "helveticaneuecyr", Arial, sans-serif; 
 
    line-height: 20px; 
 
} 
 

 
.status { 
 
    position: relative; 
 
    white-space: nowrap; 
 
    border: 1px solid #000; 
 
    margin: 0 0 20px; 
 
} 
 
.status:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 14px; 
 
    height: 14px; 
 
    background-color: #d6d6d6; 
 
    border-radius: 50%; 
 
} 
 
.status_success:before { 
 
    background-color: #3ad994; 
 
} 
 
.status_missed:before { 
 
    background-color: #e83e3e; 
 
} 
 
.status_busy:before { 
 
    background-color: #f5be48; 
 
} 
 
.status span { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    font-size: 14px; 
 
}

<div class="wrap"> 
 
    <div class="status status_success"> Success</div> 
 
    <div class="status status_busy"> Busy</div> 
 
    <div class="status status_missed"> Missed</div> 
 
</div> 
 
<div class="wrap"> 
 
    <div class="status status_success"> <span>Success</span></div> 
 
    <div class="status status_busy"> <span>Busy</span></div> 
 
    <div class="status status_missed"> <span>Missed</span></div> 
 
</div>

Answer 2

水平の中心コードのコードを以下に試してください。

body { font-size: 16px; line-height: 20px; text-align:center;} 
.status { float:none; position: relative; display:inline-block; white-space: nowrap; border: 1px solid #000; // block border for helping test margin: 0 0 20px;} 

verticalyセンターコードの下のコードを試してください。

.status { display:table: width:100%; float:none; position: relative; display:inline-block; white-space: nowrap; border: 1px solid #000; // block border for helping test margin: 0 0 20px;} 
.status:before { display:table-cell; vertical-align: middle;} 

Answer 3

あなたは親要素（.status）と垂直に中央にalign-self: centerプロパティにdisplay: flexを使用することができます。

.status { 
    position: relative; 
    white-space: nowrap; 
    border: 1px solid #000; 
    margin: 0 0 20px; 
    display: flex; 
    } 

    .status:before { 
    content: ''; 
    display: inline-block; 
    width: 14px; 
    height: 14px; 
    align-self: center; 
    background-color: #d6d6d6; 
    border-radius: 50%; 
    } 

例：@LGSonの、について説明としてhttp://codepen.io/srekoble/pen/BKWJgx

Answer 4

、vertical-alignは魔法のCSSのではなく、その行動は、私が信頼されることはありません。だから私は、あなたが望む方法であなたの要素を整列させる別の方法を提案します。 すでにposition:relativeを.statusに入れているので、生成されたコンテンツのスタイルにposition:absoluteを使用することをお勧めします。これは各ブラウザ間でより一貫しています。

codepen例：インラインblock`と `垂直整列：middle`` .status`要素ならびに擬似要素http://codepen.io/thovo/pen/MypQbW