wyśrodkowanie poziomego menu w pionie

pytanie zadane 15 listopada 2016 w HTML i CSS przez Dynamic Bywalec (2,910 p.)

chciałbym wyśrodkować poziome menu w pionie danego elementu:

CSS:

*
{
    margin:0;
    padding:0;
    font-family: 'Titillium Web', sans-serif;
}
header
{
    width: 100%;
    height: 590px;
    background-color: #87509c;
}

.nav
{
    padding: 60px;
    background-color: aquamarine;
}

.nav ul
{
    list-style-type: none;
    float: right;
}
.nav ul li
{
    float:left;
    margin-left: 10px;
}
.nav ul li:first-child
{
    margin-left: 0px;
}
.nav ul li a
{
    text-decoration: none;
    color: white;
    display: block;
    padding: 5px 10px;
    border-radius: 5px;
}
.nav ul li a:hover
{
 background-color: #643a79;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
</head>
<body>
    <header>
        <div class="nav">
            <ul>
                <li><a href="">HOME</a></li>
                <li><a href="">ABOUT</a></li>
                <li><a href="">WORK</a></li>
                <li><a href="">BLOG</a></li>
                <li><a href="">CONTACT</a></li>
            </ul>
        </div>
    </header>
</body>
</html>

Dodam że po lewej stronie chciałbym dodać Logo które będzie większe niż menu

komentarz 15 listopada 2016 przez Michał Kazula Pasjonat (19,540 p.)

Stosujesz <!DOCTYPE html> czyli HTML5 a znaczników tej wersji brak!

Czemu korzystasz z listy ul? Ciężko jest nią operować.

Załóż sobie jakieś wymiary konkretne dla guzików menu (wysokość i szerokość).

Dlaczego blok div "nav" ma ustawiony padding zamiast height?

komentarz 15 listopada 2016 przez xandros Nałogowiec (29,450 p.)

Czemu korzystasz z listy ul? Ciężko jest nią operować.

Wat?

3 odpowiedzi

odpowiedź 15 listopada 2016 przez pablop76 VIP (123,580 p.)

odpowiedź 15 listopada 2016 przez kaeres Nowicjusz (140 p.)
edycja 15 listopada 2016 przez kaeres

Jeżeli nie musisz wspierać IE9 i starszych to najłatwiej będzie użyć flexbox'a. align-items: center; wyśrodkuje Ci elementy w pionie, poza tym justify-content: space-between spowduje, że 2 elementy wypchną się do prawej i lewej strony kontenera, więc po lewej z łatwością wstawisz logo, a po prawej będziesz miał menu.

Wystarczy, że w .nav dodasz sobie div'a z logo (czy tam img - jak wolisz), obok ul.

.nav {
display: flex; 
align-items: center; 
justify-content: space-between;
}

Alternatywnie, jeśli wysokość .nav będzie stała to kod poniżej wyśrodkuje Ci elementy w pionie, ale wtedy jeszcze będziesz musiał kombinować z floatami lub czymś innym żeby umiejscowić logo po lewej, a menu po prawej.


.nav {
height: 60px
}

.nav ul {
line-height: 60px
}

Poza tym znajdzie się kilka innych sposobów, w tym wykorzystanie position: absolute;

odpowiedź 15 listopada 2016 przez imklau Nałogowiec (42,090 p.)

Zdecydowanie zrób tak, jak pisze pablop76. Jeśli na tym kolorze Aquamarine ma być i logo i nawigacja to zrób na zasadzie dwóch obiektów ułożonych obok siebie.

Co do Twojego pytania "wyśrodkować poziome menu w pionie" to chodzi Ci o wyśrodkowanie pionowe właśnie w obszarze tego koloru aquamarine?

Jedna rzecz mnie w kodzie zastanawia:

.nav ul

float: right

.nav ul li

float:left;

Po co dwa?

komentarz 15 listopada 2016 przez Dynamic Bywalec (2,910 p.)

folat right przykleja mi całą liste do prawej strony

a float left uklada każdy element listy obok siebie :D

komentarz 16 listopada 2016 przez Dynamic Bywalec (2,910 p.)

narazie chciałbym wyśrodkować nawigacje w pionie na poziomie tego niebieskiego koloru

komentarz 16 listopada 2016 przez imklau Nałogowiec (42,090 p.)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
</head>
<body>
	<div id="container">
		<header>
			<div class="nav">
				<ul>
					<li><a href="">HOME</a></li>
					<li><a href="">ABOUT</a></li>
					<li><a href="">WORK</a></li>
					<li><a href="">BLOG</a></li>
					<li><a href="">CONTACT</a></li>
				</ul>
			</div>
		</header>
	</div>
</body>
</html>

*
{
    margin:0;
    padding:0;
    font-family: 'Titillium Web', sans-serif;
}
#container
{
	background-color: #87509c;
	width: 100%;
    height: 590px;
}
header
{
    
	background-color: aquamarine;
	height: 100px;
}
 
.nav
{
	height: 30px;
	width: 400px;
	float: right;
	padding: 35px 0;
}
 
.nav ul
{
    list-style-type: none;
}
.nav ul li
{	
	float: left;
    margin-left: 10px;
}
.nav ul li:first-child
{
    margin-left: 0px;
}
.nav ul li a
{
    text-decoration: none;
    color: white;
    display: block;
    padding: 5px 10px;
    border-radius: 5px;
}
.nav ul li a:hover
{
 background-color: #643a79;
}

Ja potrafię tylko tak :D
- dałam Ci tam diva "container", w którym jest header i mógłby obejmować zarówno logo, jak i nawigację
- nav dodałam wymiary i dzięki temu możesz sobie ustawiać naigację paddingiem, jak tam Ci pasuje
Ale ja od razu bym tam wrzuciła logo, albo chociaż miejsce na nie, żeby od razu sobie to ustawić ;)