我有一个 CSS，我希望所有项目都对齐答案

【问题标题】：I have a CSS and I want all the items to be aligned in-line我有一个 CSS，我希望所有项目都对齐
【发布时间】：2021-05-30 12:05:08
【问题描述】：

我有一个 ReactJS 代码，我想要一个想要的结果，但它没有出现。我正在使用材质 UI 选项卡，我希望它与图标一致。我希望标签和Arrowbackicon 对齐，如图所示：

这就是我想要的：

这是我目前所拥有的：

这是 CSS 部分：

.MuiTabs-root {
    margin-bottom: 10px;
    border-bottom: 1px solid black;
}

.tab__section {
    display: flex;
    flex-direction: column;
}

.tab__section>.MuiSvgIcon-root {
    margin-top: 12px;
}

.MuiTabs-flexContainer {
    display: flex;
    align-items: center;
    justify-content: center
}

这里是 ReactJS 部分：

const [selectedTab, setSelectedTab] = useState(0);

const handleChange = (event, newValue) => {
    setSelectedTab(newValue);
}

<div className="tab__section">
    <ArrowBackIcon />

    <Tabs 
        value={selectedTab} 
        onChange={handleChange}
        TabIndicatorProps={
            {
                style: {
                    backgroundColor: "blue",
                    height: "4px",
            }
        }}
    >
        <Tab label="Synchronize Cabinet"></Tab>
        <Tab label="Schedule Information"></Tab>
    </Tabs>

    {selectedTab === 0 && <SyncCabinet />}
    {selectedTab === 1 && <ScheduleInfo />}
</div>

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

取消图标的margin-top并为tab__section添加align-items: center

.tab__section {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

【讨论】：

【解决方案2】：

您的 tab__section 类对于所需的 UI 不正确。您还应该从图标中删除margin-top。应该是这样的：

.tab__section {
    display: flex;
    align-items: center;
    justify-content: space-between
}

【讨论】：