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

Question

how do I center shapes that are within a wrapper in a row. So far Iv got them into the row but I cant get them to center horizontally.

Here is the html code that deals with that part:

.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">

Thanks :-)

Answer 1

You need to remove your float:left property from your pac man class, and add a text-align:center to your wrapper class.

Text-align;

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

Demo:

.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">

---

Reasoning behind Actions:

Removing Float:left and adding display:inline-block

The float property takes the element out of the normal document flow, meaning it no longer 'acts' like it is within the wrapper div (in basic terms). Since the div element is defaulted to display:block, we need to add display:inline-block so that the pac man can be in the same line.

Adding text-align to the wrapper

Adding a text-align declaration means that all internal/child elements will be aligned in this way. This means that you can align the pac men to the center of the parent.

Removing the margin-left and margin-right

Since the wrapper is 100% width by default (since this wasn't edited/declared before), the extra 25% margin either side was making the pacmen 'wrap' to the next line. Removing that allows all three to sit on the one line as outlined in your question.

Answer 2

Remove the float:left on the elements, set them to display:inline-block, and set the wrapper to 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">