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:
Respostas:
Remover
float
s e usarinline-block
podem solucionar seus problemas:(remova as linhas que começam com
-
e adicione as linhas que começam com+
.)Mostrar snippet de código
inline-block
funciona em vários navegadores, mesmo no IE6, desde que o elemento seja originalmente um elemento embutido.Citação de quirksmode :
isso geralmente pode substituir efetivamente os carros alegóricos:
Da especificação do W3C :
fonte
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:
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 +.
fonte
margin: 0 auto;
faz uma melhor um trabalho neste casofloat: left;
não era necessário.main-container
e.fixer-container
.overflow: hidden;
Centrar carros alegóricos é fácil . Basta usar o estilo para container:
altere a margem para elementos flutuantes:
ou
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:
@ 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:
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
fonte
Defina o seu recipiente de
width
empx
e adicione:Referência .
fonte
Usando o Flex
fonte
Eu acho que a melhor maneira é usar em
margin
vez dedisplay
.Ou seja:
Verifique o resultado e o código:
http://cssdeck.com/labs/d9d6ydif
fonte
fonte
O IE7 não sabe
inline-block
. Você deve adicionar:fonte
Adicione isso ao seu estilo
* Se a largura do seu contêiner for 50px, coloque 25px, se for 10em, coloque 5em.
fonte
Você também pode fazer isso alterando
.pagination
substituindo "text-align: center" por duas a três linhas de css para esquerda, transformação e, dependendo das circunstâncias, posição.fonte
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
Apenas adicionando
no meu menu de css
fez o truque de centralização também
fonte