Mam nagłówek zalogowanego użytkownika, który pokazuje apowitanie, miniatura zdjęcia profilowego użytkownika (zawsze stały rozmiar - 30x30) i link wylogowania: pomiędzy każdym tekstem a zdjęciem znajdują się pionowe separatory.
<span>Hello [username]</span>
<span class="divider"></span>
<img src="/images//photo.jpg" />
<span class="divider"></span>
<a href="/logout">Logout</a>
Oto rezultat, na który zamierzam:
.. ale wysokość obrazu popycha wszystkie pozostałe elementy „w dół”, więc rozumiem:
Jak wyrównać je w pionie - czy można to zrobić bez marginesów / wypełnień px dla każdego elementu?
Odpowiedzi:
5 dla odpowiedzi № 1Wrrite vertical-align:middle; lub vertical-align:top;. Napisz tak:
img, span , a{
vertical-align:middle
}
Sprawdź to http://jsfiddle.net/bB9vV/
1 dla odpowiedzi nr 2
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
img, .divider{float:left;}
.up{margin-bottom:15px; float:left;}
</style>
</head>
<body>
<span class="up">Hello [username]</span>
<span class="divider"></span>
<img src="/images//photo.jpg" />
<span class="divider"></span>
<a class="up" href="/logout">Logout</a>
</body>
</html>
1 dla odpowiedzi nr 3
Jeśli dobrze cię rozumiem, myślę, że takchcesz zmienić wysokość linii dzielnika za pomocą CSS. Nadaj wysokości linii wartość równą wysokości obrazu. Następnie musisz wyśrodkować tekst.
.divider{
line-height:30px;
}
EDYTOWAĆ Konieczne może być również wyrównanie obrazu. PRZYKŁAD użyj {vertical-align: middle;} dla twojego obrazu
Więcej informacji tutaj wyrównaj obraz w pionie