margin:auto; how to apply in this case

Question

I’m having trouble trying to centralize Ivs that are located within a mother div, their "children" are in float, but I wanted to centralize them using margin:auto; how can I do?

Follow my little script

<div class="p_sects">
    <div class="icon-p_a1"></div>
    <div class="icon-p_a2"></div>
    <div class="icon-p_a3"></div>
</div>

.p_sects {
    border-top: 1px solid #ccc;
    width: 597px;
    margin-top: 14px !important;
    margin: auto;
    padding: 11px;
    padding-bottom: 0px;
}
.icon-p_a1:before {
    content:'\E84E';
    float: left;
    font-size: 22px;
    color: rgba(128, 128, 128, 0.61);
}
.icon-p_a2:before {
    content:'\E801';
    font-size: 22px;
    float: left;
    margin-top: -1px;
    margin-left: 20px;
    color: rgba(128, 128, 128, 0.61);
}
.icon-p_a3:before {
    content:'\E84B';
    font-size: 23px;
    float: left;
    margin-top: -2px;
    margin-left: 20px;
    color: rgba(128, 128, 128, 0.61);
}

http://jsfiddle.net/thebestclassdsfgf/z5mfdw0u/

Answer 1

In order for the placement of the child elements to be calculated in relation to the parent element, you need to use position:relative in your class .p_sects. Thus the margin: auto will work perfectly.

Follow an example:

.pai {
    position: relative;
    height: 300px;
    width: 300px;
    
    border: 1px dashed #ccc;
}

.filha {
    margin: auto; /* ... */
    width: 150px;
    height: 100px;
}

/* somente para visualização */
.filha:first-child {
    background: skyblue;
}

/* somente para visualização */
.filha:last-child {
    background: yellow;
}

<div class="pai">
    <div class="filha">1</div>
    <div class="filha">2</div>
    <div class="filha">3</div>
</div>

Then you can apply display:inline or display:inline-block in child classes if they want them to appear online.

If you’re a little more Hardcore, can experience the property flexbox (very interesting and complete guide created by css-Tricks).

Answer 2

Man, I didn’t quite understand your code, but simplifying follows what I did:

<div class="p_sects">
    <div class="pai">
        <div class="icon"></div>
        <div class="icon"></div>
        <div class="icon"></div>
    </div>
</div>

.p_sects {
    border-top: 1px solid #ccc;
    width: 597px;
    margin-top: 14px !important;
    margin: auto;
    padding: 11px;
    padding-bottom: 0px;
    text-align:center;
}
.pai {
    display:inline-block;
}
.icon {
    float:left;
}
.icon:before {
    content:'\E84B';
    font-size: 23px;
    margin-left:20px;
    color: rgba(128, 128, 128, 0.61);
}
.icon:first-child:before {
    margin-left:0;
}

http://jsfiddle.net/z5mfdw0u/3/

If it doesn’t help what I did and you want to explain more about the goal, tell me that I try to help you in another way.

Answer 3

I’ve made several changes: Html:

<div class="p_sects">
    <div class="icon-p_a1"></div>
    <div class="icon-p_a2"></div>
    <div class="icon-p_a3"></div>
</div>

CSS:

.p_sects {
    border-top: 1px solid #ccc;
    width: 597px;
    margin: auto;
    margin-top: 14px !important;
    padding: 11px;
    padding-bottom: 0px;
    text-align: center;
}
.icon-p_a1:before {
    content: '\E84E';
}
.icon-p_a1{
    /*float: left;*/
    display: inline;
    font-size: 22px;
    color: rgba(128, 128, 128, 0.61);
}
.icon-p_a2:before {
    content: '\E801';
}
.icon-p_a2{
    font-size: 22px;
    /*float: left;*/
    display: inline;
    /*margin-top: -1px;
    margin-left: 20px;*/
    color: rgba(128, 128, 128, 0.61);
}
.icon-p_a3:before {
    content: '\E84B';
}
.icon-p_a3{
    font-size: 23px;
    /*float: left;*/
    display: inline;
    /*margin-top: -2px;
    margin-left: 20px;*/
    color: rgba(128, 128, 128, 0.61);
}

see: http://jsfiddle.net/z5mfdw0u/4/

Answer 4

The post is old but worth a reservation. I modified the stylization by simply exemplifying how I could do what I wanted in a few lines. An important modification was not to treat children independently, but as part of a group. This reduces the amount of statements. I hope I contributed.

.p_sects {
  background: #cccccc;
  text-align: center;
  padding: 2em 0;
}

.p_sects .icon-p {
  display: inline-block;
  vertical-align: middle;
  padding: 1em;
  border: 2px solid #333333;
  margin: 0 4px;
}

<div class="p_sects">
  <div class="icon-p"></div>
  <div class="icon-p"></div>
  <div class="icon-p"></div>
</div>