某些css字符代码(\25b6和\25c0)在flexbox中不对齐
某些css字符代码(\25b6和\25c0)在flexbox中不对齐
提问于 2020-07-10 10:35:43
我使用CSS字符代码来显示前一个和下一个的两个三角形，它们是通过flexbox布局的。我注意到一个奇怪的垂直对齐问题。
这里是第一个例子。左箭头和右箭头不对齐。
div {
margin: 0 8px;
}
.container {
display: flex;
align-items: baseline;
justify-content: center;
}
.some::before {
content: "\25c0";
}
.more::after {
content: "\25b6";
}<div class="container">
<div class="some">
<a><span>some text</span></a>
</div>
<div class="other">
Other Text
</div>
<div class="more">
<a><span>some more text</span></a>
</div>
</div>
但是，当我将箭头更改为相同的CSS字符时，它们会对齐
div {
margin: 0 8px;
}
.container {
display: flex;
align-items: baseline;
justify-content: center;
}
.some::before {
content: "\25b6";
}
.more::after {
content: "\25b6";
}<div class="container">
<div class="some">
<a><span>some text</span></a>
</div>
<div class="other">
Other Text
</div>
<div class="more">
<a><span>some more text</span></a>
</div>
</div>
我尝试使用flex-direction: column；和align-content，但没有成功。事实上，对于align-content，反转对齐发生在另一个箭头未对齐的地方。
添加到JSFiddle的链接会导致它在那里非常明显地显示出来：https://jsfiddle.net/L2fgcpyv/2/
Stack Overflow用户
发布于 2020-07-11 04:55:38
因为这两个三角形的大小不同。我发现它们是相同的，并且在不同的浏览器之间更加一致。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62826501
复制相关文章
相似问题
腾讯云开发者
