如何在div中居中对齐多个跨度？

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

...在包装器上。这应该是你想要的。

  

证明 - 内容：中心; / *在中心周围打包物品* /

     

^MDN