Как выровнять элементы списка если в списке первый элемент - картинка?

311

26 ноября 2016, 18:41

Не могу выровнять текст по центру относительно высоты картинки. Пробовал vertical-align:middle; но скорее всего, я что-то не так делал.

header>nav>ul 
{ 
  padding-top: 2.5%; 
} 
header>nav>ul>li 
{ 
  font-size: 1.25em; 
  color: #6c6c6c; 
  font-family: 'PT Sans', sans-serif; 
  font-size: 20px; 
  font-weight: 400; 
  display: block; 
  align-items: center; 
  float: right; 
} 
header>nav>ul>li:first-child 
{ 
}

<header> 
<nav> 
<ul> 
  <li><img src="http://blogs.slj.com/connect-the-pop/files/2013/05/Theatrics-logo-small.png" alt=""></li> 
  <li>Home</li> 
  <li>Products</li> 
  <li>Services</li> 
  <li>Contact</li> 
</ul> 
</nav> 
</header>

Answer 1

ul { 
  display: flex; 
  list-style: none; 
  align-items: center; 
  flex-direction: row-reverse; 
  padding: 0; 
 
  font-size: 1.25em; 
  color: #6c6c6c; 
  font-family: 'PT Sans', sans-serif; 
  font-size: 20px; 
  font-weight: 400; 
} 
 
li { 
  flex-grow: 1; 
}

<header> 
<nav> 
<ul> 
  <li><img src="http://blogs.slj.com/connect-the-pop/files/2013/05/Theatrics-logo-small.png" alt=""></li> 
  <li>Home</li> 
  <li>Products</li> 
  <li>Services</li> 
  <li>Contact</li> 
</ul> 
</nav> 
</header>

Answer 2

ul { 
  text-align: justify; 
  direction: rtl; 
  padding: 0; 
 
  font-size: 1.25em; 
  color: #6c6c6c; 
  font-family: 'PT Sans', sans-serif; 
  font-size: 20px; 
  font-weight: 400; 
} 
 
li { 
  display: inline-block; 
  vertical-align: middle; 
  direction: ltr; 
} 
 
ul:after { 
  content: ""; 
  display: inline-block; 
  width: 100%; 
}

<header> 
<nav> 
<ul> 
  <li><img src="http://blogs.slj.com/connect-the-pop/files/2013/05/Theatrics-logo-small.png" alt=""></li> 
  <li>Home</li> 
  <li>Products</li> 
  <li>Services</li> 
  <li>Contact</li> 
</ul> 
</nav> 
</header>

Answer 3

Очень рекомендую использовать flexbox для различных выравниваний. С ним жизнь становится прекрасна!

header>nav>ul
{
  padding-top: 2.5%;
  display:flex;
  justify-content: center;
  align-items: center;
}
header>nav>ul>li
{
  font-size: 1.25em;
  color: #6c6c6c;
  font-family: 'PT Sans', sans-serif;
  font-size: 20px;
  font-weight: 400;
  display: block;
}