Bootstrap align svg in center of header - html

Question

I copied this card template from bootstrap for a warning card. At the header of the card, I'm using an svg that I got from Bootstrap's icons https://icons.getbootstrap.com/icons/exclamation-triangle-fill/. There, you can see some examples where the icon is implemented properly. The icon is aligned exactly in the middle next to the next. However, in my code the icon is aligned at the bottom and so is not centered. Is there a way to fix this?
<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>

Answer 1

Use negative margin-top to adjust it.
For example:
<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; }
Check it here: https://jsfiddle.net/8t61qehn/

Answer 2

printf("%d\n", 42); /* You can simply add some css on style part in as follows: */
.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;
}
/*And add this styles as classes on your HTML code as follows: */
<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>
/By the way i changed the svg into img you can try like that if this is what you want./

Answer 3

My Result
Just change first DIV style with text-align: center
Check the image from above make sure that way you want show
drop like if work for you.