css 特殊符号和汉字无法flex水平居中

MrWang
  • 3.7k

html

<div class='a'>   
    <p class='b'>*</p>
    <p>哈哈</p>
  </div>
  

css

.a{
  display:flex;
  align-items:center;
}
.b{
  font-size:30px;
}

为什么无法交叉轴居中呢??
image.png

回复
阅读 1.1k
4 个回答
✓ 已被采纳

定位或者flex也行吧

有的符号是有其固定位置的,比如你问题中说的 *,还有 ^, _, ", 等等,因为它们的专门含义,比如下划线它就必须是在底部,到中间去就是中间线了。所以你问题中那个*的位置是正确的。
如果你对于那个字符的位置有自己的特定要求,可以使用伪元素

<span class="text">哈哈</span>
.text::before {
    position: relative;
    top: 3px;
    content: '*';
}

我写了个例子你可以在这里看一下

image.png
image.png

加了边框,去掉margin可以看到他占满了,但是他就是靠上。
image.png

放在一行内,他也是靠上呀
image.png

你莫非在问为什么下划线和中划线不对齐
image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏