0

Eu estou com problemas ao tentar centralizar divs que estão localizadas dentro de uma div mae, seus "filhos" estão em float, mas eu queria centraliza-las usando o margin:auto; como posso fazer?

Segue o meu pequeno 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/

0

4 Respostas 4

2

Cara, eu não entendi muito bem o seu código, mas simplificando segue o que eu fiz:

<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/

Caso não adiante o que eu fiz e queira me explicar melhor o objetivo, fala que tento te ajudar de outra forma.

2

Eu fiz várias mudanças: 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);
}

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

2

Para que o posicionamento dos elementos filhos sejam calculados em relação ao elemento pai, você precisa utilizar position:relative na sua classe .p_sects. Desta forma o margin: auto irá funcionar perfeitamente.

Segue um exemplo:

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

Depois você pode aplicar display:inline ou display:inline-block nas classes filhas caso queiram que elas apareçam em linha.

Se você for um pouco mais Hardcore, pode experimentar a propriedade flexbox (guia bem interessante e completo criado pelo css-tricks).

1

O post é antigo mas vale uma ressalva. Modifiquei a estilização exemplificando de maneira simples como poderia fazer o que queria em poucas linhas. Uma modificação importante foi não tratar os filhos de maneira independente, mas como parte de um grupo. Isso reduz a quantidade de declarações. Espero ter contribuído.

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .