Как можно выровнять на один уровень img и span (только без flexbox'а)

Question

Щас вот так

А нужно вот так:

<header>
  <a href="#"><img src="img/logo.png" alt="Logo" class="logo"></a>
  <nav>
    <ul>
      <li><a href="#">Главная</a></li>
      <li><a href="#">Компании</a></li>
      <li><a href="#">Как работает?</a></li>
      <li><a href="#">О сервисе</a></li>
      <li><a href="#">Партнерам</a></li>
      <li><a href="#">Контакты</a></li>
    </ul>
  </nav>
  <a href="#" class="contact">
    <img src="http://via.placeholder.com/50x25/33ff99/555555?text=L" alt="Contact" />
    <span>Связаться с нами</span>
  </a>
  <a href="#" class="log_in">
    <img src="http://via.placeholder.com/50x25/33ff99/555555?text=L" alt="Log-in" />
    <span>Войти в сервис</span>
  </a>
</header>

Answer 1

Если любите костыли, то, например, так:

<img src="img/contact.png" alt="Contact" style="position:relative;top:10px;"></img>

Answer 2

У ссылки или спана внутри укажите картинку как фоновую с позиционированием left center, а для текста укажите padding-left на ширину картинки или чуть больше. Как вариант, так:

.contact {
  background: url(img/contact.png) left center no-repeat;
}
.contact span {
  padding-left: 30px;
}

<a href="#" class="contact"><span>Связаться с нами</span></a>

Это только пример. При записи стилей в css, необходимо проверить правильный путь к картинке и корректно настроить отступ

Answer 3

Grid && flex для этого и внедрили в css, чтобы упростить задачу верстки

.log_in,
.contact {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 5px;
}

<header>
  <a href="#"><img src="img/logo.png" alt="Logo" class="logo"></a>
  <nav>
    <ul>
      <li><a href="#">Главная</a></li>
      <li><a href="#">Компании</a></li>
      <li><a href="#">Как работает?</a></li>
      <li><a href="#">О сервисе</a></li>
      <li><a href="#">Партнерам</a></li>
      <li><a href="#">Контакты</a></li>
    </ul>
  </nav>
  <a href="#" class="contact">
    <img src="http://via.placeholder.com/50x25/33ff99/555555?text=L" alt="Contact" />
    <span>Связаться с нами</span>
  </a>
  <a href="#" class="log_in">
    <img src="http://via.placeholder.com/50x25/33ff99/555555?text=L" alt="Log-in" />
    <span>Войти в сервис</span>
  </a>
</header>

Answer 4

/* чисто для наглядности */

a {background-color:gold; }

img {min-width:30px;min-height:30px; margin-right:5px; background-color:orange;}

span {background-color:white;}

/* нужное */

a {display:inline-block; line-height:30px}

<div>

    <a href="#" class="log_in">
        <img src="img/join.png" alt="Log-in"></img>
        <span>Войти в сервис</span>
    </a>


</div>

БЛОГ НА HUSL

Как можно выровнять на один уровень img и span (только без flexbox'а)

Ответы (4 шт):