CSS, bazı özellikler yatay elemanları hizalamak için kullanılabilir.
Hizala - Kullanma margin
bir blok düzeyinde elemanının genişliği ayarlama kabı kenarlarına uzanan engelleyecektir. Kullanım margin: auto; , Yatay olarak kap içindeki bir elemanın merkezi.
eleman ardından belirli bir genişliğe alacak ve kalan boşluk, iki kenar arasında eşit bölünmüş olacaktır:
Tip: Merkezi hizalama varsa hiçbir etkisi yoktur width özelliği ayarlanmamış (or set to 100%) .
Öneri: metin hizalama için bkz CSS Metin bölüm.
Sol ve Sağ Hizala - kullanma position
Elemanları hizalama için bir yöntem kullanmaktır position: absolute; :
Örnek
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
} Kendin dene " Note: Mutlak yerleştirilmiş elemanlar, normal akışından çıkarılır ve elemanları üzerine binecektir.
Öneri: ile elemanları hizalarken position , her zaman tanımlamak margin ve padding için <body> elemanı. Bu, farklı tarayıcılarda görsel farklılıklar kaçınmaktır.
Orada IE8 ile ilgili bir sorun da ve öncesinde kullanırken position . Bir kap elemanı ise (in our case <div class="container"> ) belirli bir genişliğe sahiptir ve !DOCTYPE bildirimi eksik olduğu, IE8 ve önceki sürümleri katacak 17px margin sağ tarafta. Bu bir kaydırma çubuğu için ayrılmış alan olarak görünüyor. Yani, her zaman set !DOCTYPE kullanırken beyanı position :
Örnek
body
{
margin: 0;
padding: 0;
}
.container
{
position: relative;
width: 100%;
}
.right
{
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
} Kendin dene " Sol ve Sağ Hizala - Kullanma float
Elemanları hizalama için bir başka yöntem kullanmaktır float özelliği:
Örnek
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
} Kendin dene " Öneri: ile elemanları hizalarken float , her zaman tanımlamak margin ve padding için <body> elemanı. Bu, farklı tarayıcılarda görsel farklılıklar kaçınmaktır.
Orada IE8 ile ilgili bir sorun da ve öncesinde kullanırken float . Eğer !DOCTYPE bildirimi eksik olduğu, IE8 ve önceki sürümleri katacak 17px margin sağ tarafta. Bu bir kaydırma çubuğu için ayrılmış alan olarak görünüyor. Yani, her zaman set !DOCTYPE kullanırken beyanı float :
Örnek
body
{
margin: 0;
padding: 0;
}
.right
{
float: right;
width: 300px;
background-color: #b0e0e6;
} Kendin dene "