Wyrównanie w pionie CSS elementów inline / inline-block

142

Próbuję uzyskać kilka inlinei inline-blockkomponenty wyrównane pionowo w div. Jak to możliwe, że spanw tym przykładzie nalega na zepchnięcie? Próbowałem obu vertical-align:middle;i vertical-align:top;, ale nic się nie zmienia.

HTML: 

<div>
  <a></a><a></a>
  <span>Some text</span>
</div>​

CSS: 

a {
    background-color:#FFF;
    width:20px;
    height:20px;
    display:inline-block;
    border:solid black 1px;
}

div {
    background:yellow;
    vertical-align:middle;
}
span {
    background:red;
}

WYNIK:
wprowadź opis obrazu tutaj

SKRZYPCE

html css vertical-alignment Yarin
źródło
pamiętaj, że tak się nie stanie, jeśli <a>elementy zawierają jakiś tekst w środku, zobacz ten link
S.Serpooshan,

Odpowiedzi:

270

vertical-aligndotyczy dopasowywanych elementów, a nie ich elementu nadrzędnego. Aby wyrównać w pionie elementy podrzędne elementu div, zrób to:

div > * {
    vertical-align:middle;  // Align children to middle of line
}

Zobacz: http://jsfiddle.net/dfmx123/TFPx8/1186/

UWAGA : vertical-alignodnosi się do bieżącej linii tekstu, a nie do pełnej wysokości rodzica div. Jeśli chcesz, aby rodzic divbył wyższy i nadal miał elementy wyśrodkowane w pionie, ustaw właściwość div's line-heightzamiast jej height. Aby zobaczyć przykład, skorzystaj z linku jsfiddle powyżej.

Diego
źródło
To przestaje działać, jeśli określisz wysokość dla zewnętrznej div.
Abhranil Das
4
@AbhranilDas vertical-align odnosi się do bieżącego wiersza tekstu, a nie do elementu nadrzędnego. Aby to działało tak, jak chcesz, ustaw div line-heightzamiast jego height.
Diego
24

Dać vertical-align:top;w a& span. Lubię to:

a, span{
 vertical-align:top;
}

Sprawdź to http://jsfiddle.net/TFPx8/10/

Sandeep
źródło
5

Zwykłe przesunięcie obu elementów w lewo daje ten sam rezultat. 

div {
background:yellow;
vertical-align:middle;
margin:10px;
}

a {
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
float:left;
}

span {
background:red;
display:inline-block;
float:left;
}
HoldTheLine
źródło
Problem z przesuwaniem ich w lewo polega na tym, że zawijają się do następnej linii, gdy przeglądarka stanie się zbyt mała. Czasami potrzebujesz, aby elementy pozostały w linii nawet poza granicami przeglądarki, a zatem inline-blockjest to jedyne rozwiązanie.
Jake Wilson,
Chociaż ten problem z zawijaniem może być problemem, powiedziałbym, że jest to naprawdę dobre rozwiązanie w przypadkach, w których zawijanie jest w porządku. Jest elegancki, przemawia do ducha pożądanego efektu i nie wymaga modyfikacji u rodzica.
Crispen Smith
1

Aby precyzyjnie ustawić pozycję inline-blockelementu, użyj opcji góra i lewo:

  position: relative;
  top: 5px;
  left: 5px;

Dzięki sztuczkom CSS !

kslstn
źródło
translatejest również możliwe.
user4642212