O layout da página nos padrões da web é implementado usando Div e CSS. O mais comumente usado é o efeito de centralizar horizontalmente a página inteira. Este é o conhecimento básico em layout de página e o conhecimento que deve ser dominado primeiro. No entanto, as pessoas ainda fazem esta pergunta com frequência. Aqui vou resumir brevemente o método de usar Div e CSS para obter a centralização horizontal da página:
1. margin:auto 0 e text-aligh:center
são usados em navegadores modernos (como o Internet). Explorer 7, Firefox, Opera, etc.) O método para obter centralização horizontal em navegadores modernos é muito simples, basta definir as margens esquerda e direita como automáticas. Significado:
#wrap {margem:0 automático;}
O código acima significa que a distância entre o wrap div e os lados esquerdo e direito é definida automaticamente, com os valores superior e inferior sendo 0 (pode ser qualquer). Execute o código atual em um navegador moderno (como Internet Explorer 7, Firefox, Opera, etc.):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<cabeça>
<title>52CSS.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="texto/css">
div#wrap {
largura:760px;
margem:0 automático;
borda:1px sólido #333;
cor de fundo:#ccc;
}
</estilo>
</head>
<corpo>
<div id="wrap">
Para definir a centralização horizontal dos elementos da página em navegadores modernos como o Firefox, basta especificar margin:0 auto;
<pré>
div#wrap {
largura:760px;
margin:0 auto; /*0 aqui pode ser qualquer valor*/
borda:1px sólido #ccc;
cor de fundo:#999;
}
</pré>
</div>
</body>
</html>
O procedimento acima funciona muito bem. Mas isso não funciona no Internet Explorer 6 e posterior, mas felizmente tem sua própria solução alternativa. No Internet Explorer, o atributo text-align é herdável, ou seja, após ser definido no elemento pai, terá esse atributo no elemento filho por padrão. Portanto, podemos definir o valor do atributo text-align na tag body para centralizar, para que todos os elementos da página sejam centralizados automaticamente. Ao mesmo tempo, também precisamos adicionar um gancho para alterar o texto da página para. a forma como estamos acostumados a ler - alinhado à esquerda. Então temos que escrever o código assim:
corpo {text-align:center;}
#wrap {text-align:left;}
Desta forma, podemos facilmente obter o alinhamento central do Div no Internet Explorer. Portanto, para exibir o efeito de centralização em todos os navegadores, podemos escrever nosso código assim:
corpo { alinhamento de texto: centro }
#wrap { alinhamento de texto:esquerda;
margem:0 automático;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<cabeça>
<title>52CSS.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="texto/css">
corpo { alinhamento de texto: centro }
div#wrap {
alinhamento de texto: esquerda;
largura:760px;
margem:0 automático;
borda:1px sólido #333;
cor de fundo:#ccc;
}
</estilo>
</head>
<corpo>
<div id="wrap">
Para definir a centralização horizontal dos elementos da página em navegadores modernos como o Firefox, basta especificar margin:0 auto;
<pré>
div#wrap {
largura:760px;
margin:0 auto; /*0 aqui pode ser qualquer valor*/
borda:1px sólido #ccc;
cor de fundo:#999;
}
No Internet Explorer 6 e anteriores, também precisamos fazer as seguintes configurações:
corpo { alinhamento de texto: centro }
div#wrap {
alinhamento de texto: esquerda;
}
</pré>
</div>
</body>
</html>
Mas há uma premissa aqui, ou seja, o elemento centralizado deve ter uma largura fixa. Por exemplo, aqui definimos para 760 pixels.
2. Posicionamento relativo e margens negativas
Execute o posicionamento relativo para quebra e, em seguida, use margens negativas para compensar o deslocamento. Este método é relativamente simples e fácil de implementar:
#wrap {
posição:relativo;
largura:760px;
esquerda:50%;
margem esquerda: -380px
}
O significado deste código é definir o posicionamento do wrap em relação à tag body de seu elemento pai e, em seguida, mover sua borda esquerda para o meio da página (ou seja, o significado de left:50%); mova da posição intermediária para a esquerda Desloque-o para trás na metade da distância para que fique centralizado horizontalmente.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<cabeça>
<title>52CSS.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="texto/css">
div#wrap {
posição:relativo;
largura:760px;
esquerda:50%;
margem esquerda: -380px;
borda:1px sólido #333;
cor de fundo:#ccc;
}
</estilo>
</head>
<corpo>
<div id="wrap">
Método que funciona em todos os navegadores:
<pré>
div#wrap {
posição:relativo;
largura:760px;
esquerda:50%;
margem esquerda: -380px;
borda:1px sólido #333;
cor de fundo:#ccc;
}
</pré>
</div>
</body>
</html>
Da mesma forma, você precisa definir uma largura fixa antes de definir a centralização horizontal.
Qual método escolher?
Qual dos dois métodos acima é melhor? O primeiro método parece usar a tecnologia Hack, mas na verdade não é um método de escrita padrão da Web bastante satisfatório e está em total conformidade com as especificações. é um problema de hack de CSS.
3. Outros métodos de centralização Os
mencionados acima são todas implementações de centralização horizontal quando uma largura específica é definida. Às vezes queremos fazer um layout flexível, ou quando um elemento está em um container queremos apenas que ele fique centralizado e não queremos definir uma largura específica. Na verdade, este não é um layout verdadeiramente centralizado. Para um elemento com 100% de comprimento, você diria que ele está centralizado ou alinhado à esquerda? Portanto, toda centralização sem altura e largura não é uma centralização verdadeira. Definimos esse design usando o preenchimento do elemento. Na verdade, alteramos o tamanho do contêiner do elemento pai:
Se quisermos que o comprimento do elemento wrap mude com a janela, mantendo o centro, podemos escrever assim:
corpo {
preenchimento: 10px 150px;
}
Aqui, precisamos apenas manter iguais os preenchimentos nos lados esquerdo e direito do elemento pai.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<cabeça>
<title>52CSS.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="texto/css">
corpo {
preenchimento: 10px 150px;
}
div#wrap {
borda:1px sólido #333;
cor de fundo:#ccc;
}
</estilo>
</head>
<corpo>
<div id="wrap">
Um layout flexível e centralizado que muda de acordo com o tamanho da janela do navegador:
<pré>
corpo {
preenchimento: 10px 150px;
}
Aqui, precisamos apenas manter iguais os preenchimentos nos lados esquerdo e direito do elemento pai.
</pré>
</div>
</body>
</html>
Claro que isto apenas "parece estar centrado", mas muitas vezes é muito útil.