如何在一行中的包装器中居中 CSS 形状

Question

如何将包装内的形状连续居中。到目前为止，我已经让它们进入了行中，但我无法让它们水平居中。

这是处理该部分的 html 代码：

.wrapper {
      overflow: hidden;
      /*make sure the wrapper has no dimension*/
      margin-bottom: 10px;
      margin-left: 25%;
      margin-right: 25%;
}
.pMan {
      width: 0px;
      height: 0px;
      border-right: 60px solid transparent;
      border-top: 60px solid red;
      border-left: 60px solid red;
      border-bottom: 60px solid red;
      border-top-left-radius: 60px;
      border-top-right-radius: 60px;
      border-bottom-left-radius: 60px;
      border-bottom-right-radius: 60px;
      float: left;
}

<div class="wrapper">
      <div class="pMan"></div>
      <div class="pMan"></div>
      <div class="pMan"></div>
</div>
<div id="todoapp" ng-controller="ToDoCtrl">

谢谢:-)

Answer 1

你需要从你的 pac man 类中删除你的 float:left 属性，并在你的包装类中添加一个text-align:center。

文本对齐；

此属性描述块容器的内联级内容如何对齐。值的含义如下：

演示：

.wrapper {
  overflow: hidden;
  /*make sure the wrapper has no dimension*/
  margin-bottom: 10px;
  text-align: center;
}
.pMan {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid red;
  border-left: 60px solid red;
  border-bottom: 60px solid red;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
  display: inline-block;
}

<div class="wrapper">
  <div class="pMan"></div>
  <div class="pMan"></div>
  <div class="pMan"></div>
</div>
<div id="todoapp" ng-controller="ToDoCtrl">

---

动作背后的推理：

删除Float:left并添加display:inline-block

float 属性将元素带出正常的文档流，这意味着它不再像在包装器 div 中那样“行为”（基本而言）。由于 div 元素默认为display:block，因此我们需要添加display:inline-block 以便pac man 可以在同一行。

将text-align 添加到包装器中

添加 text-align 声明意味着所有内部/子元素都将以这种方式对齐。这意味着您可以将 pac men 对齐到 parent 的中心。

删除 margin-left 和 margin-right

由于默认情况下包装器是 100% 宽度（因为之前没有编辑/声明过），所以两边额外的 25% 边距使 pacmen 'wrap' 到下一行。如您的问题中所述，删除它允许所有三个坐在一行上。

Answer 2

去掉元素上的float:left，设置为display:inline-block，设置包装器为text-align:center；

.wrapper {
      overflow: hidden;
      /*make sure the wrapper has no dimension*/
      margin-bottom: 10px;
      margin-left: 25%;
      margin-right: 25%;
/*add this*/
text-align:center;
}
.pMan {
/*add this*/
display:inline-block;
/* and remove the float */
      width: 0px;
      height: 0px;
      border-right: 60px solid transparent;
      border-top: 60px solid red;
      border-left: 60px solid red;
      border-bottom: 60px solid red;
      border-top-left-radius: 60px;
      border-top-right-radius: 60px;
      border-bottom-left-radius: 60px;
      border-bottom-right-radius: 60px;
      
}

<div class="wrapper">
      <div class="pMan"></div>
      <div class="pMan"></div>
      <div class="pMan"></div>
</div>
<div id="todoapp" ng-controller="ToDoCtrl">