Latest web development tutorials

CSS alinhamento horizontal (Horizontal Alinhar)

Em CSS, existem várias propriedades para o elemento de alinhamento horizontal.

Alinhar elementos de bloco

Bloco elemento é um elemento, tendo-se a toda a largura da parte frontal e traseira são quebras de linha.

Exemplos de elementos de bloco:

  • <H1>
  • <P>
  • <Div>

alinhamento do texto, ver o texto CSS seção. .

Neste capítulo, vamos mostrar-lhe como bloquear o alinhamento horizontal de elementos de layout.

, Usando a propriedade margem alinhado ao centro

elementos de bloco podem ser margens esquerda e direita definido para alinhamento "Auto".

Nota: Use na margem IE8: propriedade auto não funciona, a menos que DOCTYPE declarado!

propriedades de margem pode ser arbitrariamente dividido em esquerda e configurações de margem direita são atribuídos automaticamente, o resultado é o surgimento do elemento do meio:

Exemplos

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

tente »

Tip: Se a largura é de 100%, o alinhamento não é eficaz.

Nota: IE5 existe uma margem no bloco de processamento elemento BUG.Para tornar o exemplo acima trabalhar em IE5, precisamos adicionar algum código adicional. Exemplos

Usando a propriedade position é definida para a esquerda, alinhado à direita

Um elemento de alinhamento é usar o posicionamento absoluto:

Exemplos

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

tente »

Nota: O posicionamento absoluto não tem nada a ver com o fluxo do documento, para que eles possam abranger outros elementos da página.

Problemas de compatibilidade crossbrowser

<P alinhar semelhante quando tais elementos, uma margem predeterminada e elemento de preenchimento é sempre uma boa idéia. Isso é para evitar diferenças visuais em diferentes navegadores.

IE8 e anterior tem um problema ao usar a propriedade position. Se um elemento de recipiente (neste caso <div class = "container">) largura especificada ,! declaração DOCTYPE está faltando, IE8 e versões anteriores irá adicionar uma margem de 17px à direita. Este parece ser um espaço de reserva de rolamento. Ao usar a propriedade position é sempre definido na declaração DOCTYPE!

Exemplos

body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

tente »

Usando a propriedade float para a esquerda, alinhado à direita

Usando a propriedade float é um dos método dos elementos de alinhamento:

Exemplos

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

tente »

Problemas de compatibilidade crossbrowser

Elementos alinhados assim, a margem e padding elemento pré-determinado é sempre uma boa idéia. Isso é para evitar diferenças visuais em diferentes navegadores.

IE8 e anterior tem um problema quando usando a propriedade float. Se um elemento de recipiente (neste caso <div class = "container">) largura especificada ,! declaração DOCTYPE está faltando, IE8 e versões anteriores irá adicionar uma margem de 17px à direita. Este parece ser um espaço de reserva de rolamento. Ao usar a propriedade float é sempre definido na declaração DOCTYPE!

Exemplos

body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

tente »