wyrównać w pionie nie działa na inline-block

Question

powiedziano mi, że:

Vertical align działa tylko dla inline inline-bloków, obrazów i tabeli elementów.
Musi być zastosowany na elemencie potomnym, w przeciwieństwie do elementu nadrzędnego , w przeciwieństwie do wyrównania tekstu.

Jednak, gdy próbowałem ustawić pionowe wyrównanie środkowe na elemencie wbudowanego bloku, nie działało. Czemu?

#wrapper { 
 
border: 1px solid black; 
 
width: 500px; 
 
height: 500px; 
 
} 
 
#content { 
 
border: 1px solid black; 
 
display: inline-block; 
 
vertical-align: middle; 
 
}

<div id = 'wrapper'> 
 
<div id = 'content'> content </div> 
 
</div>

Answer 1

To nie działa ponieważ vertical-align ustawia wyrównanie zawartości śródliniowej względem ich pola liniowego, a nie ich bloku zawierającego:

Ta właściwość ma wpływ na pionowe umieszczanie w polu liniowym pól wygenerowanych przez element śródliniowy.

line box jest

Prostokątny obszar, który zawiera pola, które tworzą linię

Kiedy widzisz jakiś tekst, który ma wiele wierszy, z których każdy jest pole linii. Na przykład, jeśli masz

p { border: 3px solid; width: 350px; height: 200px; line-height: 28px; padding: 15px; }

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

Jeśli jest tylko jeden wiersz, jak w twoim przypadku, to także pole linia

Korzystanie z centrów .content verti w środku tego prostokąta. Problem polega jednak na tym, że pole liniowe nie znajduje się pionowo w środku bloku zawierającego.

Jeśli chcesz wyśrodkować coś pionowo na środku bloku zawierającego zobaczyć How to align text vertically center in div with CSS?

Answer 2

Vertical-align na elemencie inline/inline-block, obrazów, tekstów ... wyrównać elementy razem, a nie rodzica.

przykład

Zastosowanie: wyrównać buźkę obraz w tekście

można oszukać poprzez dodanie szerokość 0px, 100% wysokość pseudo-element

#wrapper { 
 
    border: 1px solid black; 
 
    width: 200px; 
 
    height: 200px; 
 
    vertical-align: middle; 
 
} 
 
#wrapper:after{ 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 0px; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
} 
 
#content { 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<div id = 'wrapper'> 
 
    <div id = 'content'> content </div> 
 
</div>

Answer 3

pracować dla mnie za pomocą vertical-align: text-top;

<div class="box"> 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
</div> 
<div class="box"> 
    Lorem ipsum dolor sit amet, diam nonummy nibh 
</div> 
<div class="box"> 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
</div> 

.box { 
    display: inline-block; 
    width: 20%; 
    margin: 5px; 
    padding:10px; 
    border-top: 5px solid #000000; 
    vertical-align: text-top; 
} 

jsfiddle