как я могу выровнять "fa-message" и аватар и текст друг на друга

Question

Я пытался выровнять значок fa-сообщения, аватар и текст вдоль друг друга, но текст перемещается под аватаром

это мой код:

<div> 
    <a href="#"><span class="fa fa-envelope"><sup>
    <span class="badge badge-success">5</span></sup></a></span>
    <span> <img src="./girl.jpg" class="img-circle img2">
    <i class="picsname2">Welcome,<br>John Doe</i></span>
</div>

изображение

Answer 1

Исправлено # 1: для значков со шрифтами нужны пустые элементы

Исправлено # 2: Ваши теги должны быть правильно вложены. Элементы A и SPAN перекрываются. Так что попробуйте.

<a href="#">
    <i class="fa fa-envelope"></i>
    <sup><span class="badge badge-success">5</span></sup>
</a>

Теперь вы можете установить стиль display:inline-block; для элемента span, чтобы он стал коробкой, предотвращающей перенос текста под значком.

<span style="display:inline-block;">
    <img src="./girl.jpg" class="img-circle img2" />
    <i class="picsname2">Welcome,<br>John Doe</i>
</span>

Следующая причина, по которой текст .picsname2 находится на новой строке, заключается в том, что вы использовали элемент <br> для переноса строки.

Либо попробуйте:

<div style="display: flex; flex-direction: row; align-items: center;"> 
    <a href="#">
        <span class="fa fa-envelope"></span>
        <sup><span class="badge badge-success">5</span></sup>
    </a>
    <span style="display:inline-block;">
        <img src="./girl.jpg" class="img-circle img2" />
        <i class="picsname2">Welcome,<br />John Doe</i>
    </span>
</div>

или удалите разрыв строки следующим образом:

<div> 
    <a href="#">
        <span class="fa fa-envelope"></span>
        <sup><span class="badge badge-success">5</span></sup>
    </a>
    <span>
        <img src="./girl.jpg" class="img-circle img2" />
        <i class="picsname2">Welcome, John Doe</i>
    </span>
</div>

Изображение должно быть фиксированного размера, чтобы предотвратить изменение высоты. Даже если мы используем Flex box, вы не хотите, чтобы высота панели навигации менялась слишком сильно, иначе вы тратите пространство контента на мобильных устройствах.

Answer 2

i.picsname2 {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.2;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div>
  <a href="#">
    <span class="fa fa-envelope"></span>
    <sup><span class="badge badge-success">5</span></sup>
  </a>
  <span> 
      <img src="http://placekitten.com/30/30" class="img-circle img2">
      <i class="picsname2">Welcome,<br>John Doe</i>
    </span>

</div>

Answer 3

Используя flexbox, это простая задача. Отрегулируйте затем расстояние между элементами.

.flex-row-centered {
  display: flex;
  flex-direction: row;
  align-items: center;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="flex-row-centered"> 
    <a href="#"><span class="fa fa-envelope"><sup>
    <span class="badge badge-success">5</span></sup></a></span>
    <span class="flex-row-centered"> <img src="./girl.jpg" class="img-circle img2">
    <i class="picsname2">Welcome,<br>John Doe</i></span>
</div>

Или (поскольку вы пометили вопрос с помощью bootstrap-4) с помощью классов начальной загрузки 4:

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-direction-row align-items-center"> 
    <a href="#" class="mr-2"><span class="fa fa-envelope"><sup>
    <span class="badge badge-success">5</span></sup></a></span>
    <span class="d-flex flex-direction-row align-items-center"> <img src="./girl.jpg" class="img-circle img2 mr-2">
    <i class="picsname2">Welcome,<br>John Doe</i></span>
</div>

Answer 4

Вы можете увеличить свою ширину или использовать свойство css display: inline-block или удалить то, что <br/> использовалось перед именем.