Office UI Fabric图标居中圆形及与文本对齐问题求助

针对你遇到的两个样式问题，直接给你调整方案：

1. 让图标在圆形内完全居中 #

你当前的.circle已经用了flex居中，但中间的.icon容器可能没跟上，或者图标本身有默认尺寸/边距。可以试试两种方案：

方案一：调整.icon样式 #

给.icon也加上flex居中属性，同时按需调整图标尺寸（如果图标太大超出圆形）：

icon: {
  color: '#0078d7',
  /* 让.icon容器也居中对齐内部图标 */
  display: 'flex',
  align-items: 'center',
  justify-content: 'center',
  /* 可选：如果图标尺寸超过圆形，缩小图标 */
  width: 16px,
  height: 16px
}

方案二：简化结构（更推荐） #

去掉中间的.icon div，直接把图标放进.circle，然后把颜色样式移到.circle里：

<div className={classNames.tabContent}>
  <div className={classNames.circle}><CafeIcon /></div>
</div>

circle: {
  border: 'solid 2px',
  borderRadius: '50%',
  background: 'white',
  height: 20,
  width: 20,
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  color: '#0078d7' /* 直接给圆形内的图标设置颜色 */
}

2. 让圆形与“Cafe”文本垂直对齐 #

别用float来排列元素，改用flex布局更省心：

步骤1：修改.root的布局 #

给.root添加flex属性，让内部元素自动垂直居中，同时去掉多余的paddingTop：

root: [
  {
    backgroundColor: theme.palette.themePrimary,
    height: 40,
    color: 'white',
    maxWidth: "100%",
    margin: '0 auto',
    borderBottom: '1px solid transparent',
    boxSizing: 'border-box',
    paddingLeft: 20,
    /* 新增flex布局，实现垂直居中 */
    display: 'flex',
    alignItems: 'center'
    /* 去掉paddingTop:10，因为flex居中会处理垂直位置 */
  },
  className
],

步骤2：调整.tabContent的间距 #

去掉float:left，用margin-left控制元素之间的距离：

tabContent: {
  color: 'white',
  /* 删掉float:left */
  // float: 'left',
  border: 'none',
  outline: 'none',
  cursor: 'pointer',
  /* 用margin-left代替paddingLeft，控制两个tabContent的间距 */
  marginLeft: 15px
},

注意：第一个.tabContent里的圆形不需要左边距，所以可以给第二个.tabContent单独加margin-left，或者给.tabContent设置margin-right，根据你的需求调整。

这样调整后，圆形和文本就能完美对齐，图标也会在圆形里居中显示了。

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