如何使用引導程序垂直對齊與文本相關的 SVG
[英]How to vertically align an SVG related to a text with bootstrap
問題描述
使用引導程序，我無法將內聯 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="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>
放大 500% 顯示 SVG 未居中，但略低於應有的位置。 出於某種原因，removing.doctype 使其完美地集中在 firefox 和 chrome 上。 它看起來也像將 SVG 大小加倍（到 32）使它工作。 我對文檔類型或 SVG 大小應該如何影響垂直 alignment 有點迷茫？ 這是什么原因？
1 個解決方案
解決方案1
2 已采納 2021-05-21 10:44:34
我很確定它與!doctype無關，您只需將d-flex class 添加到div ，它圍繞着您的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>
如何將 Bootstrap 4 中的 SVG 垂直對齊到行高？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.