如何将 CSS-shapes 在包装纸中连续居中

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 class 中删除 float:left 属性，然后将 text-align:center 添加到包装 class.

文本对齐；

This property describes how inline-level content of a block container is aligned. Values have the following meanings:

演示：

.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

浮动属性将元素从正常文档流中取出，这意味着它不再 'acts' 就像它在包装器 div 中一样（基本术语）。由于div元素默认为display:block，我们需要加上display:inline-block，这样吃豆人才能在同一行

将 text-align 添加到包装器

添加文本对齐声明意味着所有 internal/child 元素都将以这种方式对齐。这意味着您可以将吃豆人对齐到父级的中心。

删除 margin-left 和 margin-right

由于默认情况下 wrapper 的宽度为 100%（因为这不是 edited/declared 之前），所以两侧额外的 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">

如何将 CSS-shapes 在包装纸中连续居中

How to center CSS-shapes within a wrapper in a row

html

center

alignment

css-shapes