html - 如何在div中居中对齐多个span？

Question

我试图在看起来像这样的 div 中以 span 元素的形式显示标签。

标签在这里居中对齐，但是当标签移动到下一行/行时，下面的行不是居中对齐的。

我想将两行都设置为居中对齐。

下面是相同的 ReactJS 代码:

const styles = {
  tag: {
    border: "1px solid #ffffff",
    borderRadius: "10%",
    padding: 2,
    margin: "2px"
  },
  tagsWrapper: {
    width: "100%",
    padding: "5px",
    display: "flex",
    flexWrap: "wrap"
  }
};

<div style={styles.tagsWrapper}>
   <div
     style={{
       margin: "0px auto",
       display: "flex",
       flexWrap: "wrap"
     }}>
     {this.props.tags.map((tag, index) => {
       if (tag.selected)
         return (
           <span key={index} style={styles.tag}>
             {tag.label}
           </span>
         );
       else return null;
     })}
   </div>
</div>

我试图找到解决方案，但找不到。

Answer 1

因为你使用的是 flexbox，所以使用

justify-content:center

...在 wrapper 上。这应该是您所追求的。

justify-content: center; /* Pack items around the center */

^MDN