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.

     < !DOCTYPE html>   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