Значок начальной загрузки - текст не по центру на значке - PullRequest
Новая
       16

Значок начальной загрузки - текст не по центру на значке

0 голосов
/ 07 июня 2018

Я не могу понять, как привести мой текст в соответствие с серединой моего значка.Это использует Chrome.Смотрите эту скрипку . 

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<label class="badge badge-secondary align-middle">
  <span class="pb-2">Should Be Centered</span>
  <i class="material-icons md-18">cancel</i>
</label>

Любые предложения приветствуются!

Пример изображения:

enter image description here

Ответы [ 3 ]

0 голосов
/ 07 июня 2018

Вы также можете использовать это свойство! 

 span{
   vertical-align: super;
  }
0 голосов
/ 07 июня 2018

Вы можете запустить Bootstrap Flex , чтобы это произошло. 

<label class="badge badge-secondary d-inline-flex align-items-center justify-content-start">
    <span>Should Be Centered</span>
    <i class="material-icons md-18">cancel</i>
</label>

Codepen пример.

0 голосов
/ 07 июня 2018

Вы хотите поместить align-middle в содержимое значка вместо badge ... 

  <label class="badge badge-secondary">
    <span class="pb-2 align-middle">Should Be Centered</span>
    <i class="material-icons md-18 align-middle">cancel</i>
  </label>

Демо с иконкой MD: https://www.codeply.com/go/TkAEvkUcXB

...