Выровнять значок материала с текстом на Materialize

Недавно я начал работать над проектом, который содержит таблицу с некоторыми полями, и я хочу добавить несколько значков дизайна материала через MaterializeCSS на стороне значков. Посмотрите на изображение, и вы можете получить его

Я перепробовал все: выравнивание по вертикали, inline (-block), flex и все, что я мог найти при переполнении стека. Так что нет, это не дубликат, мне действительно нужна помощь. Спасибо.

Ответ 1

Это один из способов сделать это. Конечно, это зависит от значка, вы должны найти конкретный font-size который будет соответствовать высоте значка. Примеры:

#txt1{
 font-size:28px;
 line-height:24px;
}
#txt2{
 font-size:36px;
 line-height:24px;
}
#txt3{
 font-size:21px;
 line-height:24px;
}
.material-icons{
    display: inline-flex;
    vertical-align: top;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<span id="txt1">ID</span><i class="material-icons">info_outline</i>
</br>
<span id="txt2">ID</span><i class="material-icons">settings_cell</i>
</br>
<span id="txt3">ID</span><i class="material-icons">stay_primary_landscape</i>

Ответ 2

У меня была такая же проблема в течение самого длительного времени, но я нашел решение, которое сработало для меня. Сначала дайте пользовательский класс значку, который вы хотите центрировать. Затем добавьте нижний вертикальный выравниватель и размер шрифта, который соответствует или меньше, чем текст, который он помещает рядом. Кроме того, не указывайте размер значка в имени значка. Сообщите мне, если это сработает для вас.

CSS

.inline-icon {
   vertical-align: bottom;
   font-size: 18px !important;
}

HTML:

<p>"Your text goes here"<i class="inline-icon material-icons">warning</i></p>

Ответ 3

Вы можете изменить значок margin-top на любое ПОЛОЖИТЕЛЬНОЕ или ОТРИЦАТЕЛЬНОЕ значение, чтобы выровнять его. Например,

<i class="material-icons" style="margin-top:-10px">info_outline</i>

Ответ 4

Просто настройте vertical-align: в отрицательное значение.

образец кода:

<i class="material-icons" style="vertical-align: -6px;">folder</i>

Ответ 5

Просто:

вы можете просто объединить другой класс ("правильный") с ним:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<span id="txt1">ID</span><i class="material-icons right">info_outline</i>
</br>
<span id="txt2">ID</span><i class="material-icons right">settings_cell</i>
</br>
<span id="txt3">ID</span><i class="material-icons right">stay_primary_landscape</i>

Ответ 6

Вы можете сделать следующее в HTML:

<span>ID</span> <i class="material-icons">info</i>

Затем в CSS вы можете стилизовать класс material-icons следующим образом:

.material-icons {
    diplay:inline-flex;
    vertical-align:top;
}