Bootstrap выровняет svg по центру заголовка
Я скопировал этот шаблон карты из бутстрапа для карты предупреждения. В заголовке карточки я использую svg, полученный из иконок Bootstrap https://icons.getbootstrap.com/icons/exclamation-triangle-fill/. Там вы можете увидеть несколько примеров, где иконка реализована правильно. Значок выравнивается точно посередине рядом со следующим. Однако в моем коде значок выровнен по низу и поэтому не центрирован. Есть ли способ исправить это?
<div class = "card" style = "width: 18rem;">
<div class = "card-body">
<div class = "mb-3">
<h5 class = "card-title">
<svg xmlns = "http://www.w3.org/2000/svg" width = "16" height = "16" fill = "currentColor" viewBox = "0 0 16 16">
<path fill-rule = "evenodd" d = "M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 5zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
</svg>
Warning
</h5>
</div>
<p class = "card-text">
Text of card
</p>
</div>
</div>
Проверьте это jsfiddle.net/1bLdq8js
Ответы 3
Используйте минус margin-top, чтобы настроить его.
Например:
<div class = "card" style = "width: 18rem;">
<div class = "card-body">
<div class = "mb-3">
<h5 class = "card-title">
<svg class = "myIcon" xmlns = "http://www.w3.org/2000/svg" width = "16" height = "16" fill = "currentColor" viewBox = "0 0 16 16">
<path fill-rule = "evenodd" d = "M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 5zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
</svg>
Warning
</h5>
</div>
<p class = "card-text">
Text of card
</p>
</div>
</div>
CSS:
.myIcon { margin-top: -5px; }
Проверьте это здесь: https://jsfiddle.net/8t61qehn/
Это работает, но мне просто интересно, есть ли общее решение для такого рода вещей. Это требует, чтобы я знал точные пиксели и измерения. Есть ли решение, которое работало бы для всех изображений, независимо от того, были ли они 16x16?
Мой результат
Просто сначала измените стиль DIV на text-align: center
Проверьте изображение сверху, убедитесь, что вы хотите показать
бросьте лайк, если работаете на вас.
Это было не совсем то, чего я хотел. Вы видите, что изображение все еще выровнено по низу. Один из способов проверить, не отцентрирован ли он, — увеличить масштаб страницы. Когда он начинает выглядеть запутанным, значит, он не отцентрован.
О, теперь я понял.. просто укажите родительский элемент div margin-top = value.. он будет таким, как вы хотите, браузерным центром или другим методом, использующим свойства FLEXBOX.
printf("%d\n", 42); /* Вы можете просто добавить CSS в часть стиля следующим образом: */
.card-svg {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
}
.card-txt{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/*И добавьте эти стили как классы в свой HTML-код следующим образом: */
<img class = "card-svg" src = "http://www.w3.org/2000/svg" width = "16" height = "16" fill = "currentColor" viewBox = "0 0 16 16">
<path fill-rule = "evenodd" d = "M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 5zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
<img>
<h5 class = "card-txt">Warning</h5>
/Кстати, я изменил svg на img, вы можете попробовать так, если это то, что вы хотите./
Добавьте класс или идентификатор к значку svg и в css установите для него отрицательное значение margin-top. Вот так
margin-top: -5px;