Warum die Inline-Block-Elementposition eine falsche vertikale Position in einer Zeile hat

Question

Wenn ich mein Inline-Blockelement (14x14px) in eine einzeilige Zeile (Höhe und Zeilenhöhe = 20px) setze, findet es nicht in der Mitte von es ist Elternteil (vertikal). Line-height problem picture

Hier ist ein С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%; 
    } 
} 

Sag mir bitte, warum geschieht das?

Answer 1

Die vertical-align: middle richtet die Mitte des Elements mit der Mitte der Kleinbuchstabe in den Eltern, was einfach bedeutet, die vertikale Ausrichtung ist keine 100% präzise ein Element genau in der Mitte der Mutter zu setzen.

Src: https://css-tricks.com/almanac/properties/v/vertical-align/

In folgenden Proben habe ich einen Wrapper (und Spanne des in 2: nd Probe, mit Schriftgröße der pseudo Größe entspricht) zu zeigen, wie sie interagieren und wie Sie das Ergebnis aussehen tun, um besser.

Hinweis: Wie von "Vangel Tzo" vorgeschlagen, ist flex ein Weg, der die Arbeit besser macht.

.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

versuchen Sie unter Code für horizontales Zentrum Code.

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;} 

Versuch unter Code für verticaly Center-Code.

.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

Sie display: flex für Elternelement verwenden könnten (.status) und die align-self: center Eigenschaft vertikal zu zentrieren.

.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%; 
    } 

Ein Beispiel: http://codepen.io/srekoble/pen/BKWJgx

Answer 4

Als @LGSon explaination, die vertical-align ist keine magische css, und sein Verhalten wird von mir nie vertraut. Daher schlage ich eine alternative Möglichkeit vor, um Ihre Elemente so auszurichten, wie Sie es möchten. Weil Sie bereits position:relative in die .status setzen, empfehle ich, position:absolute zu verwenden, um für Ihren generierten Inhalt zu stylen, und es ist zwischen jedem Browser konsistenter.

A codepen Beispiel: http://codepen.io/thovo/pen/MypQbW