html - 在窗口中居中跨度

Question

我有一行 span，我希望它们在页面或 Canvas 中居中。我应该使用 CSS 品质吗？

<div>
  <span style='width:100px;height:100px;padding:50px;border:4px solid black;border-color:#032441;border-radius:90px;background-color:transparent' class=div id=rowOneColumnOne>

  </span>

  <span style='width:100px;height:100px;padding:50px;border:4px solid black;border-color:#032441;border-radius:90px;background-color:transparent' class=div id=rowOneColumnTwo>

  </span>

  <span style='width:100px;height:100px;padding:50px;border:4px solid black;border-color:#032441;border-radius:90px;background-color:transparent' class=div id=rowOneColumnThree>

  </span>

  <span style='width:100px;height:100px;padding:50px;border:4px solid black;border-color:#032441;border-radius:90px;background-color:transparent' class=div id=rowOneColumnFour>

  </span>
</div>

Answer 1

您可以为此使用FlexBox 技术。

div {
  display: flex;
  flex-direction: row;
}

div span {
  margin: auto;
}

<div>
  <span style='width:100px;height:100px;padding:50px;border:4px solid black;border-color:#032441;border-radius:90px;background-color:transparent' class=div id=rowOneColumnOne>

  </span>

  <span style='width:100px;height:100px;padding:50px;border:4px solid black;border-color:#032441;border-radius:90px;background-color:transparent' class=div id=rowOneColumnTwo>

  </span>

  <span style='width:100px;height:100px;padding:50px;border:4px solid black;border-color:#032441;border-radius:90px;background-color:transparent' class=div id=rowOneColumnThree>

  </span>

  <span style='width:100px;height:100px;padding:50px;border:4px solid black;border-color:#032441;border-radius:90px;background-color:transparent' class=div id=rowOneColumnFour>

  </span>
</div>

注意:row 是flex-direction 属性的默认值。所以你可以跳过那个。