How to vertically align an SVG related to a text with bootstrap
Question
Using bootstrap, I cannot get an inline SVG to vertically center relative to a text. This is what a minimal example looks like
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
/>
</head>
<body">
<div style="background-color: lightgrey;" class="row align-items-center">
<div class="col-auto">
<svg height="16" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</div>
<div style="text-transform: uppercase;" class="col pl-0">test</div>
</div>
</body>
</html>
Zooming at 500% shows that the SVG is not centered but slightly lower than what it should be. For some reason, removing.doctype makes it centered perfectly on both firefox and chrome. It also looks like doubling the SVG size (to 32) makes it work. I'm a bit lost as to how either doctype or the SVG size should affect the vertical alignment though? What is the cause of this?
1 answers
solution1
2 ACCPTED 2021-05-21 10:44:34
I am pretty sure it has nothing to do with !doctype and you just need to add d-flex class to the div , that wrapped around your svg .
<:DOCTYPE html> <html> <head> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min:css" /> </head> <body> <div style="background-color; lightgrey:" class="row align-items-center"> <div class="d-flex col-auto"> <svg height="16" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> </div> <div style="text-transform; uppercase;" class="col pl-0">test</div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.