CSS centrando truques [fechado]
-
02-07-2019 - |
Pergunta
A minha equação favorita para centrar um elemento xhtml usando apenas CSS é a seguinte:
display: block;
position: absolute;
width: _insert width here_;
left: 50%;
margin-left: _insert width divided by two & multiplied by negative one here_
Há também a margem mais simples: método de auto em navegadores que suportam. Alguém tem maneiras complicado para o conteúdo força para exibir centradas em sua embalagem? (Pontos de bônus para a centragem vertical)
Editar - oops, esqueci a parte 'negativo' de um na margem esquerda. fixo.
Solução
Stick with margin: 0 auto; para o alinhamento horizontal; Se você precisar de alinhamento vertical como posição de uso bem: absolute; superior: 50%; margem superior: - (largura / 2) px; Seja embora ciente, Se o recipiente tem mais largura do que o seu ecrã uma parte dela vai cair fora da tela no lado esquerdo usando o Posição:. Método absoluto
Outras dicas
div #centered{
margin: 0 auto;
}
parece ser o mais confiável da minha experiência.
Bem, isso parece um exagero enorme, eu tenho a dizer. I tendem a definir o recipiente para text-align:center;
para navegadores antigos, margin:auto;
para navegadores modernos, e deixá-lo assim. Em seguida reinicie text-align no elemento (se ele contém texto).
Claro, algumas coisas precisam definir como bloco, e larguras precisa definir ... Mas o que diabos você está tentando estilo que necessidades que muito hackers ao redor?
<div style="text-align:center">
<div style="width:30px; margin:auto; text-align:left">
<!-- this div is sitting in the middle of the other -->
</div>
</div>
Margin:. Auto obras em todos os navegadores, desde que você tenha certeza que IE está no modo de padrões
É mais exigente do que outros e exige o seu tipo de documento a ser o primeiro no seu documento, o que significa que nenhum espaço em branco (espaço, guias ou linefeeds) antes dela.
Se você fizer isso, margin: auto é o caminho a percorrer! :)
apenas uma nota que o margin: auto; método só funciona se o navegador pode calcular a largura do item a ser centrado e a largura do contêiner pai. em muitos casos, configuração de largura: auto; obras, mas em alguns, não.
Este é um marcador útil para truques CSS
http://css-discuss.incutio.com/
lotes de centrando truques também.
O posicionamento absoluto com a abordagem de 50% tem o efeito colateral grave que, se a janela do navegador é mais estreito, em seguida, o elemento em seguida, alguns dos conteúdos será exibido fora do lado esquerdo do browser -. Com nenhuma forma de rolagem para ele
Vara de margens auto - eles são muito mais confiáveis ??
.Se você estiver trabalhando no modo de padrões (que você deve ser), então eles são suportados em todos os navegadores que são susceptíveis de se preocupam.
Você pode usar o hack text-align se você realmente precisa para suportar o Internet Explorer 5.5 e anteriores.
body {
text-align: center;
}
#container {
width: 770px;
margin: 0 auto;
text-align: left;
}
Isso funciona muito bem em todos os navegadores habituais. Como margin: 0 auto;
já mencionado não funciona em todas as versões semi-atuais do IE.
Tente isto; Não sei se ele funciona no IE, funciona bem no Fx embora. Centra-se um bloco DIV na página usando CSS apenas (sem JavaScript), nenhuma margem automaticamente e o texto dentro do bloco DIV ainda está alinhado à esquerda. Eu só estou tentando descobrir se vertical-centralização poderia funcionar dessa maneira, também, mas até agora sem sucesso.
<html>
<head>
<title>Center Example</title>
<style>
.center {
clear:both;
width:100%;
overflow:hidden;
position:relative;
}
.center .helper {
float:left;
position:relative;
left:50%;
}
.center .helper .content {
float:left;
position:relative;
right:50%;
border:thin solid red;
}
</style>
</head>
<body>
<div class="center">
<div class="helper">
<div class="content">Centered on the page<br>and left aligned!</div>
</div>
</div>
</body>
</html>