Como faço para centralizar os elementos flutuantes?

Estou implementando paginação e precisa ser centralizado. O problema é que os links precisam ser exibidos como blocos, então eles precisam estar flutuando. Mas então, text-align: center; não funciona neles. Eu poderia consegui-lo dando o pad div de wrapper à esquerda, mas cada página terá um número diferente de páginas, então isso não funcionaria. Aqui está 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); } 
   

Para obter a ideia, o que eu quero:

texto alternativo

Removendo float e usando inline-block pode corrigir 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 começando com + .)

 .pagination { text-align: center; } .pagination a { + display: inline-block; width: 30px; height: 30px; 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); } 
   

Desde muitos anos eu uso um truque antigo que aprendi em algum blog, me desculpe, eu não lembro o 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%; } 
 
  • Floated element
  • Floated element
  • Floated element

Centrar flutuadores é fácil . Basta usar o estilo para o recipiente:

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

  • cross-browser para quaisquer elementos (blocos, itens de lista, etc.)

  • simplicidade

Pontos Fracos:

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

@ arnaud576875 Usar elementos de bloco embutido funcionará muito bem (cross-browser) neste caso, pois a paginação contém apenas âncoras (inline), sem itens de lista ou divs:

Forças:

  • funciona para itens de múltiplas linhas.

Weknesses:

  • lacunas entre elementos de bloco inline – funciona da mesma maneira que um espaço entre 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 se livrar dessas lacunas eu adicionaria ao código arnaud576875 (não totalmente testado):

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

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

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

Defina a width do seu contêiner em px e adicione:

 margin: 0 auto; 

Referência .

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); } 
   

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

 display:inline; zoom: 1; 
 text-align: center; float: none; 

Eu acho que a melhor maneira é usar margin vez 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

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

    float object center    

passo 1

crie dois ou mais div’s que você quer e dê a eles uma largura definida como 100px para cada um, então flutue para a esquerda ou para a direita

passo 2

em seguida, distorça esses dois div’s em outro div e dê a largura de 200px. para este div aplicar margem auto. boom funciona muito bem. verifique o exemplo acima.

Apenas adicionando

 left:15%; 

no meu menu css de

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

fez o truque de centragem também

    Intereting Posts