如何为含span、b标签的div设置CSS：文本居中与b标签下划线

1. 修复文本居中问题 #

你当前的div使用了justify-content: center，但这个属性仅在flex容器中生效，所以有两种简单的修复方式：

• 直接给div设置text-align: center：因为内部都是行内/行内块文本元素，这个属性可以直接让所有文本水平居中，实现成本最低；
• 若要使用flex布局，需给div添加display: flex和flex-direction: column，再配合align-items: center实现水平居中。

2. 替换<u>标签实现下划线 #

<u>标签的样式可能被全局CSS覆盖，建议用CSS的text-decoration: underline来控制下划线，样式更稳定且支持定制。可以直接给<b>标签加内联样式，或用类名统一管理（更推荐）。

修改后的代码示例（内联样式版本） #

<div style={{
  color: 'black',
  textAlign: 'center',
  marginTop: '1.3rem'
}}>
  <span>
    <b style={{ textDecoration: 'underline' }}>{galleyNo}</b>
  </span>
  <br />
  <span>{galleyItem}</span>
</div>

更易维护的类名方案 #

/* CSS 样式部分 */
.galley-container {
  color: black;
  text-align: center;
  margin-top: 1.3rem;
}

.galley-no {
  font-weight: bold;
  text-decoration: underline;
}

// JSX 结构部分
<div className="galley-container">
  <span className="galley-no">{galleyNo}</span>
  <br />
  <span>{galleyItem}</span>
</div>

补充说明 #

• 若偏好flex布局，div的样式可改为：

  {
    color: 'black',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    marginTop: '1.3rem'
  }
  

• text-decoration支持更多定制，比如text-decoration: underline dashed #666可以实现灰色虚线下划线，比<u>标签灵活得多。

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