Em CSS, várias propriedades pode ser usada para alinhar os elementos horizontalmente.
Alinhar ao centro - Usando margin
Definir a largura de um elemento nível de bloco irá impedi-lo de que se estende para as bordas de seu recipiente. Use margin: auto; , para centrar horizontalmente um elemento dentro de seu recipiente.
O elemento, então, tomar-se a largura especificada, eo espaço restante será dividido igualmente entre as duas margens:
Exemplo
.center
{
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
} Tente você mesmo " Dica: Centro de alinhamento não tem efeito se a width propriedade não está definida (ou definido como 100%).
Dica: Para alinhar o texto, consulte o CSS Texto capítulo.
Esquerda e Direita Alinhar - Usando position
Um método para alinhar elementos é usar position: absolute; :
Exemplo
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
} Tente você mesmo " Nota: elementos posicionados absolutos são removidos do fluxo normal, e pode sobrepor elementos.
Dica: Ao alinhar elementos com position , defina sempre margin e padding para o <body> elemento. Isso é para evitar diferenças visuais em diferentes navegadores.
Há também um problema com o IE8 e anterior, quando se utiliza position . Se um elemento de recipiente (no nosso caso <div class="container"> ) tem uma largura especificada, eo !DOCTYPE Declaração está faltando, IE8 e versões anteriores irá adicionar uma 17px margin no lado direito. Este parece ser o espaço reservado para uma barra de rolagem. Então, sempre definir o !DOCTYPE Declaração ao usar position :
Exemplo
body
{
margin: 0;
padding: 0;
}
.container
{
position: relative;
width: 100%;
}
.right
{
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
} Tente você mesmo " Esquerda e Direita Alinhar - Usando float
Outro método para o alinhamento de elementos é usar o float propriedades:
Exemplo
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
} Tente você mesmo " Dica: Ao alinhar elementos com float , defina sempre margin e padding para o <body> elemento. Isso é para evitar diferenças visuais em diferentes navegadores.
Há também um problema com o IE8 e anterior, quando se utiliza float . Se o !DOCTYPE Declaração está faltando, IE8 e versões anteriores irá adicionar uma 17px margin no lado direito. Este parece ser o espaço reservado para uma barra de rolagem. Então, sempre definir o !DOCTYPE Declaração ao usar float :
Exemplo
body
{
margin: 0;
padding: 0;
}
.right
{
float: right;
width: 300px;
background-color: #b0e0e6;
} Tente você mesmo "