Alinhando um flutuador: div da esquerda para o centro?

96

Quero que um grupo de imagens seja exibido horizontalmente na página. Cada imagem tem alguns links abaixo dela, então preciso colocar um contêiner ao redor de cada imagem / grupo de links.

O mais perto que cheguei do que quero é colocá-los em divs que flutuam: à esquerda. O problema é que eu quero que os contêineres sejam alinhados ao centro, não à esquerda. Como posso conseguir isso.

html css

— Mike
fonte

216

use em display:inline-block;vez de flutuar

você não pode centralizar os flutuadores, mas os blocos embutidos centralizam como se fossem texto, então no contêiner geral externo de sua "linha" - você definiria text-align: center;então para cada contêiner de imagem / legenda (são aqueles que seriam inline-block;), você pode re - alinhe o texto à esquerda, se necessário

— Clairesuzy
fonte

3

Caso alguém esteja lutando com os espaços que aparecem entre os elementos, remova o espaço em branco em seu código, definindo seus elementos como '<img> </img> <img> </img>' ou '<img> < / img> <! - Comentário -> <img> </img> '.

— Maarten de

1

Ou defina o elemento pai font-size:0e restaure-o no filho. Ou use letter-spacing:-.31emno pai e letter-spacing:0na criança.

— Mike Causer

@Baumr Use o flexbox. Há um exemplo abaixo .

— Jan Derk

3

você pode precisar adicionar vertical-align:middledurante o uso display:inline-block.

— ibsenv

47

CSS Flexbox é bem suportado atualmente. Acesse aqui um bom tutorial sobre flexbox.

Isso funciona bem em todos os navegadores mais recentes:

#container {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
}

.block {
  width:              150px;
  height:             150px;
  background-color:   #cccccc;
  margin:             10px;        
}

<div id="container">
  <div class="block">1</div>    
  <div class="block">2</div>    
  <div class="block">3</div>    
  <div class="block">4</div>    
  <div class="block">5</div>        
</div>

Expandir trecho

Alguns podem perguntar por que não usar display: inline-block? Para coisas simples está bom, mas se você tiver código complexo dentro dos blocos, o layout pode não estar mais centralizado corretamente. Flexbox é mais estável do que flutuar para a esquerda.

— Jan Derk
fonte

Isso funciona para centralizar horizontalmente. Que tal centrar verticalmente também?

— Cullub

Para centralizar verticalmente, dê ao contêiner uma altura (por exemplo, altura: 500px;) e adicione align-items: center;

— Jan Derk

9

tente assim:

  <div id="divContainer">
    <div class="divImageHolder">
    IMG HERE
    </div>
    <div class="divImageHolder">
    IMG HERE
    </div>
    <div class="divImageHolder">
    IMG HERE
    </div>
    <br class="clear" />
    </div>

    <style type="text/css">
    #divContainer { margin: 0 auto; width: 800px; }
    .divImageHolder { float:left; }
    .clear { clear:both; }
    </style>

— Lauw
fonte

9

Basta envolver os elementos flutuantes em um <div>e fornecer a ele este CSS:

.wrapper {

display: table;
margin: auto;

}

— goodpixels
fonte

1

Talvez seja isso que você está procurando - https://www.w3schools.com/css/css3_flexbox.asp

CSS:

#container {
  display:                 flex;
  flex-wrap:               wrap;
  justify-content:         center;
}

.block {
  width:              150px;
  height:             150px;
  margin:             10px;        
}

HTML:

<div id="container">
  <div class="block">1</div>    
  <div class="block">2</div>    
  <div class="block">3</div>          
</div>

— Shaq
fonte

0

.contentWrapper {
    float: left;
    clear: both;
    margin-left: 10%;
    margin-right: 10%;
}

.repeater {
    height: 9em;
    width: 9em;
    float: left;
    margin: 0.2em;
    position: relative;
    text-align: center;
    cursor: pointer;
}

— Teoman shipahi
fonte