CSS centrando truques [fechado]

StackOverflow https://stackoverflow.com/questions/148251

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.

Foi útil?

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>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top