为何设置`display: 'flex', alignItems: 'center'`之后，子标签不能正常的浮动了？

原创

8808.tw

发布于 2024-08-11 22:01:40

1180

发布于 2024-08-11 22:01:40

我有如下代码：

<div style={{
    textAlign: 'left',
    height: '40px',
    }}>
    <label style={{float: 'left'}}>{props.title}</label>
    <input style={{float: 'right'}} placeholder='搜索:'></input>
</div>

我想要div里面的子标签垂直居中：

然后我设置：display: 'flex', alignItems: 'center'

<div style={{
                textAlign: 'left',
                height: '40px',
                display: 'flex',
                alignItems: 'center'
                }}>
                <label style={{float: 'left'}}>{props.title}</label>
                <input style={{float: 'right'}} placeholder='搜索:'></input>
            </div>

可以做到垂直居中了，但是可是input组件不右浮动了。