Список центра внутри div

Я знаю, что есть много других ответов, но я не знаю, если я просто делаю что-то неправильно, но они не работают.Список центра внутри div

В принципе, у меня есть «логотип» (это просто мое имя) в div («имя») в левой части контейнера div («header»). У меня также есть мои навигационные ссылки справа от имени div, которые находятся в div «nav».

Проблема в том, что nav div фактически плавает в верхней части заголовка div, а имя div идеально сосредоточено. Картина: enter image description here

Это мой HTML-файл:

<!DOCTYPE html> 
<html lang=“en”> 
<head> 
    <title>Toby Caulk</title> 
<link rel="stylesheet" type="text/css" href="css/base.css"/> 
</head> 
<body> 

<div id="header"> 
    <header> 
     <div id="name"> 
      <h1>Toby Caulk</h1> 
     </div> 

     <div id="nav"> 
      <nav> 
       <ul> 
        <li>Home</li> 
        <li>Resume</li> 
        <li>Portfolio</li> 
        <li>Contact</li> 
       </ul> 
      </nav> 
     </div> 
    </header> 
</div> 

</body> 
</html>

И CSS:

*{ 
    font-family: monospace; 
} 

#header { 
    position: fixed; 
    left: 0; 
    right: 0; 
    top: 0; 
    background-color: rgb(245, 245, 245); 
    box-shadow: 0px 10px 5px #888888; 
} 

#name { 
float: left; 
font-size: 20px; 
margin-left: 20px; 
} 

#nav { 
    float: left; 
} 

nav ul li { 
    display: inline-block; 
} 

nav ul { 
    padding: 0; 
    list-style-type: none; 
} 

nav li { 
    font-weight: 150; 
    font-size: 24px; 
}

То, что я хочу для нав дел до центрируется по вертикали внутри DIV заголовка , так же, как и имя div. Как мне это сделать?

источник

2015-03-02 Anonymous

центрированный Я предполагаю, что вы имеете в виду по вертикали? – j08691

@ j08691 Правильно, я отредактирую свой вопрос, чтобы сделать это более заметным. –

'# name' определяет высоту заголовка. –

Смотрите комментарии и свойство я добавили #name

*{ 
 
    font-family: monospace; 
 
} 
 

 

 

 

 
#header { 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    background-color: rgb(245, 245, 245); 
 
    box-shadow: 0px 10px 5px #888888; 
 
} 
 

 
#name { 
 
font-size: 20px; 
 
margin-left: 20px; 
 
    display: inline-block; /* Ensures that #name and #name aligns side by side */ 
 
    line-height: 100%; /* Makes to ensure vertical centering */ 
 
    vertical-align: middle; /* Makes sure it's centered vertically */ 
 
} 
 

 
#nav { 
 
display: inline-block; 
 
} 
 

 

 

 
nav li { 
 
    font-weight: 150; 
 
    font-size: 24px; 
 
    display: inline-block; /* You can align them without using float */ 
 
}

<div id="header"> 
 
    <header> 
 
     <div id="name"> 
 
      <h1>Toby Caulk</h1> 
 
     </div> 
 

 
     <div id="nav"> 
 
      <nav> 
 
       <ul> 
 
        <li>Home</li> 
 
        <li>Resume</li> 
 
        <li>Portfolio</li> 
 
        <li>Contact</li> 
 
       </ul> 
 
      </nav> 
 
     </div> 
 
    </header> 
 
</div>

источник

2015-03-02 18:47:28

Список центра внутри div

ответ

Смежные вопросы