Forum PHP.pl > [CSS] Wyśrodkowanie pionowe elementów menu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS] Wyśrodkowanie pionowe elementów menu

Kuba707

22.12.2014, 16:46:16

Witam, żeby było łatwiej to przepisałem kod mojej strony na łatwiejszy, oto on:

[HTML] pobierz, plaintext 
<html>
	<head>
		<style>
			#menu {
				width: 1000px;
				height: 55px;
				border: 1px solid green;
				background-color: green;
			}
 
			.element_menu {
				width: 100px;
				border: 1px solid red;
				float: left;
				text-align: center;
			}
 
			a {
				text-decoration: none;
				color: white;
				font-size: 11pt;
			}
		</style>
		<meta charset="utf-8"> 
	</head>
	<body>
		<div id="menu">
			<div class="element_menu"><a href="#">Strona<br />Główna</a></div>
			<div class="element_menu"><a href="#">Kontakt</a></div>
			<div class="element_menu"><a href="#">Tygodniowy plan<br />pracy</a></div>
		</div>
	</body>
</html>
[HTML] pobierz, plaintext

Tak to wygląda po wyrenderowaniu przez przeglądarkę: [OBRAZEK]

Sęk w tym, że jak widać mam <a> z tekstem jedno liniowym jak i wielo liniowym. Chcę to wyrównać w pionie. Jak to uczynić?

trueblue

22.12.2014, 18:19:58

google: css vertical centering

Kuba707

22.12.2014, 18:41:14

Szukałem, próbowałem vertical-align ale nie chciało działać, usunąłem rodzica dla <a> i <a> zrobiłem jako block-inline, ale wtedy float nie działał. Teraz trafiłem na rozwiązanie żeby ten DIVowski element menu dać jako absolute, top 50% + transform translateY(-50%) ale to jest dobre dla jednego elementu... a ja potrzebuję dla każdego elementu menu.

Edit: Dobra, problem rozwiązany. Trzeba było usunąć float: left, dodać display: table-cell, vertical-align: center. Link: http://jsfiddle.net/42w0wde9/2/
Jak to się dzieje, że po usunięciu floata, dodaniu tych dwóch własności nadal te elementy układają się jak przy float? Sprawia to, że elementy stają się jakby polami tabeli..

trueblue

22.12.2014, 19:32:22

Cytat(Kuba707 @ 22.12.2014, 18:41:14 )

display: table-cell

Jak to się dzieje, że po usunięciu floata, dodaniu tych dwóch własności nadal te elementy układają się jak przy float? Sprawia to, że elementy stają się jakby polami tabeli..

Powyżej sam sobie odpowiedziałeś.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.