Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 task
LinTing-pl opened this issue May 15, 2024 · 5 comments
Open
1 task

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

LinTing-pl opened this issue May 15, 2024 · 5 comments

Comments

@LinTing-pl
Copy link

  • 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的高度与行高一致,可见设计者是想让文字居中的,但是实际效果没有居中

@LinTing-pl
Copy link
Author

image
image

@selicens
Copy link
Member

image

@LinTing-pl
Copy link
Author

image
image

@selicens
Copy link
Member

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

@LinTing-pl
Copy link
Author

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants