Как разместить текст в навигации "div."

Question

OK. Спасибо, что предоставили мне свое драгоценное время, чтобы рассмотреть эту проблему.

В принципе, у меня есть «div», который я использую в верхней части экрана для моей панели навигации. Это простая панель навигации, просто «div» размером 80% с некоторым текстом, который меняет цвет при наведении.

Проблема, с которой я столкнулся; текст автоматически начинается в верхней части «div», и я хотел бы сосредоточить его. Я пробовал поля, paddings, floats, «div's» внутри «div» и т. Д. И т. Д.

Я отправлю код здесь для панели навигации, и если вы знаете, как это исправить, знаете?

Благодаря

HTML КОД:

<div class="header"> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Repairs</a></li> 
       <li><a href="#">Tune up/ Viruses</a></li> 
       <li><a href="#">System Builds</a></li> 
       <li><a href="#">Cables</a></li> 
       <li><a href="#">Contact us</a></li> 
       <li><a href="#">Find us</a></li> 
       <li><a href="#">Links</a></li> 
       <!-- <li><a href="/"><img src="facebook.png"></a></li> --> 
      </ul> 
    </div> 

CSS КОД:

.header ul { margin:0px;} 
     div.header 
     { 
      width: 80%; 
      height: 40px; 
      margin-top: none; 
      margin-bottom: none; 
      margin-left: auto; 
      margin-right: auto; 
      border-top: none; 
      border-left: none; 
      border-right: none; 
      border-bottom: none; 
      background-color: #575757; 
     } 
     li 
     { 
      display: inline; 
      font-family: 'open sans,' arial; 
      padding-right: 10px; 
      padding-top: 10px; 
      margin-left: 10px; 
      font-size: 20px; 
     } 
     li a 
     { 
      text-decoration: none; 
      color: white; 
     } 
     li a:hover 
     { 
      color: #00ccff; 
     } 

Answer 1

Вы можете использовать кучу вещей для вертикального центрирования элемента.

Лучшие один для один линейных элементов (элементов с одной строкой текста, например) является line-height

Установите line-height равная высоту своего родителя:

li { line-height: 40px; }