There is a problem that Chinese characters in the span tag cannot be aligned, and the icon and string cannot be vertically centered.

1. The solution for Chinese characters, arrays, and letters in the span tag cannot be the same:

white-space:nowrap;

2. The icon and string in vue are vertically centered:

 <a-row>
            <a-col :span="24" style="display: flex;align-items: center;color: #fff;">
                <a-icon type="left-square" style="font-size: 16px;display:inline-block;vertical-align:middle;"/>
                <label style="width: 500px;display:inline-block;vertical-align:middle;white-space:nowrap;">3月2021</label>
                <a-icon type="right-square" style="font-size: 16px;display:inline-block;vertical-align:middle;"/>
            </a-col>
        </a-row>

Taking Ant-design-vue as an example, the parent label style needs to be set as follows:

display: flex;align-items: center;

The subset tag needs to be styled:

font-size: 16px;display:inline-block;vertical-align:middle;

 

Guess you like

Origin blog.csdn.net/XU441520/article/details/114308489