Как центрировать `<span>` шрифт потрясающие иконки вертикально друг с другом - PullRequest
Новая
       24

Как центрировать `<span>` шрифт потрясающие иконки вертикально друг с другом

1 голос
/ 13 марта 2019

У меня есть несколько отличных иконок шрифтов, которые я хочу выровнять по вертикали, так что 

#############################
icon icon icon icon icon icon
#############################

<div class="announcement-card-body modal-body card border-0">
        <span class="info fa fa-info-circle"></span>
        <span class="star fas fa-star fa-lg "></span>
 </div>

Я уже пробовал использовать vertical-align: middle

Это то, что я пробовал, основываясь на комментариях, но не повезло 

.info{
  display: flex; 
  align-items: center; 
  justify-content: center;
}
 .star {
  display: flex; 
  align-items: center; 
  justify-content: center;
}

А также 

.info{
    display: flex;
    flex-direction: row;;
}

.star {
    display: flex;
   flex-direction: row;
}

1 Ответ

3 голосов
/ 14 марта 2019

Ваши display: flex и align-items: center должны быть на контейнере 

.announcement-card-body {
  display: flex; 
  align-items: center; 
  justify-content: center;
}

<div class="announcement-card-body modal-body card border-0">
  <span class="info fa fa-info-circle"></span>
  <span class="star fas fa-star fa-lg "></span>
</div>
...