Como centralizo elementos flutuantes?

355

Estou implementando a paginação e ela precisa ser centralizada. O problema é que os links precisam ser exibidos como bloco, portanto, precisam ser flutuados. Mas então, text-align: center;não funciona neles. Eu poderia consegui-lo fornecendo o preenchimento div do wrapper à esquerda, mas cada página terá um número diferente de páginas, para que não funcionasse. Aqui está o meu código:

.pagination {
  text-align: center;
}
.pagination a {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->

Para entender, o que eu quero:

texto alternativo

Mike
fonte
Todo o objetivo da propriedade float é posicionar um elemento ao longo do lado esquerdo ou direito do contêiner.
Rob
3
@ Rob: Bem, eu precisava definir a largura e a altura dos elementos do link, o que pode ser feito apenas nos elementos do bloco, mas quando você cria os blocos do link, eles se espalham na nova linha cada, é por isso que eu os fiz flutuar.
Mike
Solução alternativa, quando você não deseja / não pode usar o bloco embutido. stackoverflow.com/questions/1232096/...
Hakunin
11
Creio que esta pergunta merece a atenção do moderador, pois seu título e respostas atuais são enganosos. A questão não é sobre o conteúdo flutuante no centro, mas sobre o conteúdo centralizado. Flutuar significa que o conteúdo não flutuante do irmão deve preencher as lacunas restantes e isso claramente não é desejado nem alcançado aqui.
tao
8
@AndreiGheorghiu, se você acha isso, sugira uma edição em vez de sinalizá-la para mods. Qualquer pessoa pode editar essas perguntas, portanto, edite a pergunta e escreva uma explicação detalhada no motivo da edição. Isso é algo que qualquer usuário pode fazer, não precisa ser um moderador. Não há nada de errado com a pergunta ou quaisquer respostas que requer intervenção moderador
Zoe

Respostas:

406

Remover floats e usar inline-blockpodem solucionar seus problemas:

 .pagination a {
-    display: block;
+    display: inline-block;
     width: 30px;
     height: 30px;
-    float: left;
     margin-left: 3px;
     background: url(/images/structure/pagination-button.png);
 }

(remova as linhas que começam com -e adicione as linhas que começam com +.)

inline-block funciona em vários navegadores, mesmo no IE6, desde que o elemento seja originalmente um elemento embutido.

Citação de quirksmode :

Um bloco embutido é colocado embutido (ou seja, na mesma linha do conteúdo adjacente), mas se comporta como um bloco.

isso geralmente pode substituir efetivamente os carros alegóricos:

O uso real desse valor é quando você deseja atribuir uma largura a um elemento embutido. Em algumas circunstâncias, alguns navegadores não permitem uma largura em um elemento embutido real, mas se você alternar para exibição: bloco embutido, você pode definir uma largura. ” ( http://www.quirksmode.org/css/display.html#inlineblock ).

Da especificação do W3C :

[bloco embutido] faz com que um elemento gere um contêiner de bloco no nível embutido. A parte interna de um bloco embutido é formatada como uma caixa de blocos e o próprio elemento é formatado como uma caixa atômica no nível de embutida.

Arnaud Le Blanc
fonte
10
Dica: não se esqueça do alinhamento vertical.
Synexis
5
Sim, este é um dos poucos casos em que o alinhamento vertical realmente faz o que você espera.
Mike Turley
4
A desvantagem desse método é que é difícil controlar o espaçamento horizontal, pois espaços em branco podem aparecer entre os elementos.
Xavier Poinas
@XavierPoinas: use tamanho da fonte: 0; no pai para corrigir esse problema
roelleor
Lembre-se de que "font-size: 0" costumava não funcionar em dispositivos Android. Não tenho certeza se isso ainda é verdade para versões recentes.
Andreas Baumgart
150

Desde há muitos anos que uso um velho truque que aprendi em algum blog, desculpe-me por não me lembrar do nome para lhe dar créditos.

De qualquer forma, para centralizar elementos flutuantes, isso deve funcionar:

Você precisa de uma estrutura como esta:

    .main-container {
      float: left;
      position: relative;
      left: 50%;
    }
    .fixer-container {
      float: left;
      position: relative;
      left: -50%;
    }
<div class="main-container">
  <div class="fixer-container">
    <ul class="list-of-floating-elements">

      <li class="floated">Floated element</li>
      <li class="floated">Floated element</li>
      <li class="floated">Floated element</li>

    </ul>
  </div>
</div>

o truque é deixar flutuar para a esquerda para fazer com que os contêineres alterem a largura, dependendo do conteúdo. Than é uma questão de posição: relativa e deixada 50% e -50% nos dois contêineres.

O bom é que este é um navegador cruzado e deve funcionar no IE7 +.

lukart
fonte
11
Um lembrete de que isso funciona se houver apenas 1 elemento flutuante único.
Wtower
O problema é que uma barra de rolagem horizontal aparecerá porque a div externa se estende além da tela. Além disso, quando a lista passa para outra linha, a coisa toda vai para o alinhamento esquerdo.
cleversprocket
Isso não vai fazer diferença sem definir o recipiente max-width, margin: 0 auto;faz uma melhor um trabalho neste caso
Murhaf Sousli
11
Para mim, float: left;não era necessário .main-containere .fixer-container.
CSUM
@cleversprocket Eu resolvi o deslocamento horizontal envolvendo tudo em um único div comoverflow: hidden;
CSUM
36

Centrar carros alegóricos é fácil . Basta usar o estilo para container:

.pagination{ display: table; margin: 0 auto; }

altere a margem para elementos flutuantes:

.pagination a{ margin: 0 2px; }

ou

.pagination a{ margin-left: 3px; }
.pagination a.first{ margin-left: 0; } 

e deixe o resto como está.

É a melhor solução para eu exibir coisas como menus ou paginação.

Forças:

  • navegador cruzado para quaisquer elementos (blocos, itens de lista etc.)

  • simplicidade

Fraquezas:

  • funciona apenas quando todos os elementos flutuantes estão em uma linha (o que geralmente é bom para menus, mas não para galerias).

@ arnaud576875 O uso de elementos de bloco embutido funcionará muito bem (entre navegadores) nesse caso, pois a paginação contém apenas âncoras (embutidas), sem itens de lista ou divs:

Forças:

  • funciona para itens de várias linhas.

Weknesses:

  • lacunas entre os elementos do bloco embutido - funciona da mesma maneira que um espaço entre as palavras. Isso pode causar alguns problemas ao calcular a largura do contêiner e as margens de estilo. A largura das lacunas não é constante, mas é específica do navegador (4-5px). Para me livrar dessas lacunas, adicionaria o código arnaud576875 (não totalmente testado):

    .paginação {espaçamento entre palavras: -1em; }

    .pagination a {espaçamento entre palavras: .1em; }

  • não funcionará no IE6 / 7 em elementos de bloco e itens de lista

romper
fonte
display: o truque da tabela é inacreditável, fiz tudo o que deveria com apenas algumas linhas. Eu preciso me lembrar disso. Cheers
kilop
A técnica de bloqueio em linha funciona extremamente bem. Felizmente, os elementos que estou usando (elementos div aninhados) para isso podem lidar bem com a lacuna.
karolus
Você também pode remover as lacunas inline-bloco, largando o tamanho da fonte para zero, em seguida, restaurando a seu valor anterior dentro dos elementos filhos
Mike Causador
15

Defina o seu recipiente de widthem pxe adicione:

margin: 0 auto;

Referência .

Barney
fonte
11
para mim, esta é a melhor resposta: p.
alansiqueira27
3
Isso funcionaria apenas se a largura do contêiner for apropriada, que é o problema quando ele contém elementos flutuantes.
Wtower
11

Usando o Flex

.pagination {
  text-align: center;
  display:flex;
  justify-content:center;
}
.pagination a {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->

Santosh Khalse
fonte
5

Eu acho que a melhor maneira é usar em marginvez de display.

Ou seja:

.pagination a {
    margin-left: auto;
    margin-right: auto;
    width: 30px;
    height: 30px;    
    background: url(/images/structure/pagination-button.png);
}

Verifique o resultado e o código:

http://cssdeck.com/labs/d9d6ydif

Tarod
fonte
11
Funciona apenas com margem: automático; em vez das propriedades individuais esquerda e direita também.
Cellepo #
3
text-align: center;
float: none;
Michael
fonte
2

O IE7 não sabe inline-block. Você deve adicionar:

display:inline;
zoom: 1;
Krisada Art
fonte
1

Adicione isso ao seu estilo

position:relative;
float: left;
left: calc(50% - *half your container length here);

* Se a largura do seu contêiner for 50px, coloque 25px, se for 10em, coloque 5em.

11-
fonte
1

Você também pode fazer isso alterando .paginationsubstituindo "text-align: center" por duas a três linhas de css para esquerda, transformação e, dependendo das circunstâncias, posição.

.pagination {
  left: 50%; /* left-align your element to center */
  transform: translateX(-50%); /* offset left by half the width of your element */
  position: absolute; /* use or dont' use depending on element parent */
}
.pagination a {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->

mwag
fonte
0
<!DOCTYPE html>
<html>
<head>
    <title>float object center</title>
    <style type="text/css">
#warp{
    width:500px;
    margin:auto;
}
.ser{
width: 200px;
background-color: #ffffff;
display: block;
float: left;
margin-right: 50px;
}
.inim{
    width: 120px;
    margin-left: 40px;
}

    </style>
</head>
<body>



<div id="warp">
            <div class="ser">
              <img class="inim" src="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">

              </div>
           <div class="ser">
             <img class="inim" sr`enter code here`c="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">

             </div>
        </div>

</body>
</html>

passo 1

crie duas ou mais divs que você deseja e dê a elas uma largura definida como 100px para cada uma e depois flutue para a esquerda ou direita

passo 2

distorça essas duas divs em outra div e dê a largura de 200px. a essa div, aplique a margem auto. boom funciona muito bem. verifique o exemplo acima.


fonte
-1

Apenas adicionando

left:15%; 

no meu menu de css

#menu li {
float: left;
position:relative;
left: 15%;
list-style:none;
}

fez o truque de centralização também

user3085662
fonte
4
15% é claramente arbitrário.
Wtower