如何让Flex布局中的按钮与Dropdown组件垂直对齐？

问题核心：带图标的CommandBarButton和Dropdown在Flex布局中无法垂直对齐，移除按钮图标后对齐正常，手动设置负margin无效。

解决思路 #

1. 开启容器Flex垂直对齐：右侧按钮与Dropdown所在容器需设置display: flex和align-items: center，让内部元素统一以中线对齐，替代默认块级布局的零散对齐方式。
2. 匹配组件高度与内边距：Fluent UI的Dropdown默认带有上下内边距，需调整至和CommandBarButton的高度（44px）匹配，消除视觉偏移。

修改后的代码 #

import { makeStyles, shorthands } from "@fluentui/react-components";
import {
  Dropdown,
  Option,
  OptionGroup,
  DropdownProps
} from "@fluentui/react-components/unstable";
import { CommandBarButton } from "@fluentui/react/lib/Button";
import * as React from "react";
import { initializeIcons } from "@fluentui/react/lib/Icons";

initializeIcons();
const useStyles = makeStyles({
  dropdown: {
    ...shorthands.borderWidth(0),
    "::after": {
      borderBottomWidth: 0
    },
    // 匹配按钮高度，垂直居中内容
    minHeight: "44px",
    display: "flex",
    alignItems: "center",
    // 移除Dropdown默认上下内边距
    ...shorthands.padding("0", "8px")
  },
  // 右侧容器样式，统一内部元素对齐
  rightContainer: {
    display: "flex",
    alignItems: "center",
    gap: "8px" // 添加间距优化视觉体验
  }
});
export const Grouped = (props: Partial<DropdownProps>) => {
  const land = ["Cat", "Dog", "Ferret", "Hamster"];
  const styles = useStyles();
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
      <div>
        <span>Title</span>
      </div>
      <div className={styles.rightContainer}>
        <CommandBarButton
          styles={{ root: { height: 44 } }}
          iconProps={{ iconName: "Back" }}
          ariaLabel="Back"
          text="Button 1"
          disabled={false}
          checked={false}
        />
        <CommandBarButton
          styles={{ root: { height: 44 } }}
          iconProps={{ iconName: "Up" }}
          text="Button 2"
          disabled={false}
          checked={false}
        />

        <Dropdown
          className={styles.dropdown}
          style={{ minWidth: "auto" }}
          defaultSelectedOptions={["Cat"]}
          {...props}
        >
          <OptionGroup label="Land">
            {land.map((option) => (
              <Option key={option} disabled={option === "Ferret"}>
                {option}
              </Option>
            ))}
          </OptionGroup>
        </Dropdown>
      </div>
    </div>
  );
};

关键修改点说明 #

• 右侧容器通过styles.rightContainer开启Flex布局并设置垂直居中，让按钮和Dropdown共享同一对齐基准。
• 给Dropdown设置minHeight: 44px匹配按钮高度，同时移除默认上下内边距，确保内部选中内容垂直居中。
• 外层主容器添加align-items: center，让标题与右侧区域整体垂直对齐，省去单独给标题设置line-height的繁琐操作。

内容的提问来源于stack exchange，提问作者SoftTimur