[英]How can I align a <svg> element with text?
I wanted to use Bootstrap icons next to text to help differentiate options/items in a simple webpage I'm designing, but the <svg>
elements are slightly off relatively to the text.我想在文本旁边使用 Bootstrap 图标来帮助区分我正在设计的简单网页中的选项/项目,但<svg>
元素相对于文本略有偏离。 I'm using Bootstrap 4.0.0 with a personal css file to tweak a couple of things.我正在使用带有个人 css 文件的 Bootstrap 4.0.0 来调整一些东西。
Both the HTML and CSS I used are in https://www.codeply.com/p/MU4zE84NJc , where the problem can be seen in the table items.我使用的 HTML 和 CSS 都在https://www.codeply.com/p/MU4zE84NJc 中,可以在表项中看到问题。 It's minimal but I can't leave it unsolved.这是最小的,但我不能让它悬而未决。
Any idea how can I make sure the <svg>
elements stay aligned with the text?知道如何确保<svg>
元素与文本保持对齐吗?
Try using " vertical-align " property to svg element.尝试对svg元素使用“垂直对齐”属性。
Like text-bottom, text-top像 text-bottom, text-top
svg {
vertical-align: text-bottom;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.