vueComponent/ant-design-vue

step组件 默认icon中的文字没有居中

LinTing-pl opened this issue · 5 comments

LinTing-pl commented
  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.2.20

Environment

浏览器版本、Vue版本

Reproduction link

https://3x.antdv.com/components/steps-cn

Steps to reproduce

css样式问题，直接看官网就可以复现

What is expected?

能直接居中，不需要使用者再去穿透改样式

What is actually happening?

step组件的默认icon里的文字由span包裹，而span元素的父元素为div，该div的高度与行高一致，可见设计者是想让文字居中的，但是实际效果没有居中

selicens commented

滚动是指先滚动到底部在回到顶部，步骤条内文字就不居中了嘛，这一步我没有复现，你可以试下4.x和其他浏览器、电脑之类的

LinTing-pl commented

一开始，我以为是广告插入导致的，但后面发现当页面缩放到一些比例，也可以引起文字不居中，而且firefox、edge也都有这个问题，这可能是字体的原因（我猜测），因为可以明显的看到span的上content区域大于下content区域，我尝试通过vertical-align更改span的基线，但无法解决这个问题
image
image

我需要加上这一段代码，去更改icon的样式
.ant-steps-item-icon {
display: inline-flex;
justify-content: center;
align-items: center;
}