Sayfa tasarımlarında, içerikleri farklı bölgelere yerleştirmek ve düzeni sağlamak için web öğelerinin hizalanması, önemli işlerimiz arasında yer almaktadır. Bu yazımızda gerek satır içi (inline) gerekse blok tipi (block) elemanları dikey ve yatay olarak nasıl hizalanabileceğini göreceğiz.
<div> Hizalama
Web sayfasında, daha çok tasarımı organize etmek için sıklıkla kullandığımız <div> gibi bir blok öğesini merkeze yatay eksende merkeze hizalamak isteyebilirsiniz.Bir blok öğesini yatay olarak ortalamak için “margin: auto” uygulamalısınız. Elemanın genişliğini ayarlamak, kutunun sayfa kenarlarına kadar uzanmasını önleyecektir.Eleman daha sonra belirtilen genişliği alacak ve kalan alan iki kenar boşluğu “margin: auto” bildirimi kısıtlaması ile aralarında eşit olarak bölünecektir:
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <style> .merkez { margin: auto; width: 60%; border: 3px solid #77ADF1; padding: 10px; } </style> </head> <body> <h2>div Öğesinin Yatay Hizalanması</h2> <div class="merkez"> <p>Bu div öğesi yatay eksende ortalamıştır.</p> </div> </body> </html> |
Not: Eğer genişlik (width) özellik değeri belirtilmemiş ise (veya% 100 olarak ayarlanırsa) , merkezi hizalama işleminin gerçekleşmeyecektir.
Metni yatayda hizalama
Metni, bir öğenin yatay eksende ortasına yerleştirmek için “text-align : center;” bildirimi kullanılmalıdır. Metin hizalamayla ilgili daha fazla örnek için CSS Metin İşlemleri konusuna bir göz atın.
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <style> .center { text-align: center; border: 3px solid green; } </style> </head> <body> <h2>Yatayda ortalanmış yazı</h2> <div class="center"> <p>Bu yazı yatay eksende ortalanmıştır</p> </div> </body> </html> |
Resmi Yatayda Hizalama
Bir resmi, yatayda ortalamak için, öncelikli olarak onu bir blok öğesi yapın (display : block) ve ardından (margin : auto) CSS bildirimini uygulayın.
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <style> img { display: block; margin: 0 auto; width: 40%; } </style> </head> <body> <h2>CSS ile Resim Ortalama</h2> <img src="yazilimbilisim-logo.png"> </body> </html> |
position Özelliği ile Yatay Hizalama
HTML öğelerini yatayda sağa veya sola hizalamak için position Özelliğinden faydalanabilirsiniz. Özellikle mutlak konumlandırma yapabilen absolute değeri ile hizalamayı kolaylıkla gerçekleştirebilirsiniz.
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <style> .sag { position: absolute; right: 0px; width: 300px; border: 3px solid #72ADF1; padding: 10px; } </style> </head> <body> <h2>Sağa Hizalama</h2> <div class="sag"> <p>Bu paragraf position : absolute ile mutlak konumlandırma kullanılmış ve sağa hizalamıştır.</p> </div> </body> </html> |
Not: Mutlak konumlandırılmış öğeler normal akışın dışına çıkartılır ve öğeler üzerine binebilir.
float Özelliği ile Yatay Hizalama
HTML öğelerini hizalamak için bir başka yöntemde float Özelliğini kullamaktır.
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <style> .sag { float: right; width: 300px; border: 3px solid #72ADF1; padding: 10px; } </style> </head> <body> <h2>Sağa Hizalama</h2> <div class="sag"> <p>Bu kutu float : right ile sağa hizalamıştır.</p> </div> </body> </html> |
padding Özelliği ile Dikeyde Hizalamak
Bir öğeyi CSS’de dikey olarak ortalamanın birçok yolu vardır. Bunlardan en basiti olarak düşünebileceğiniz padding iç boşluğunu alt ve üst değerleri için eşit olarak belirlemektir.
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <style> .orta { padding: 80px 0; border: 3px solid red; } </style> </head> <body> <h2>Dikey Ortalama</h2> <div class="orta"> <p>Bu paragraf div öğesi içinde dikey olarak ortalanmıştır.</p> </div> </body> </html> |
Örnek;
Yazıyı yatayda ve dikeyde birlikte ortalamak isterseniz aynı zamanda “text-align” özelliğini kullanmalısınız.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <style> .orta { padding: 80px 0; border: 3px solid red; text-align: center; } </style> </head> <body> <h2>Dikey Ortalama</h2> <div class="orta"> <p>Bu paragraf div öğesi içinde dikey olarak ortalanmıştır.</p> </div> </body> </html> |
line-heigth Özelliği ile Ortalamak
Yazıyı kutunun orta yerine hizalamak için bir başka yol ise “line-heigth” özelliğinden faydalanmaktır.
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <style> .orta { line-height: 200px; height: 200px; border: 3px solid green; text-align: center; } .orta p { line-height: 1.5; display: inline-block; vertical-align: middle; } </style> </head> <body> <h2>Dikey Ortalama</h2> <div class="orta"> <p>Bu paragraf div öğesi içinde dikey olarak ortalanmıştır.</p> </div> </body> </html> |
transform Özelliği ile Ortalamak
transform Özelliğini kullanarak metni bir <div> öğesinin içine ortalayabilirsiniz.
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html> <head> <style> .orta { height: 200px; position: relative; border: 3px solid green; } .orta p { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } </style> </head> <body> <h2>Dikey Ortalama</h2> <div class="orta"> <p>Bu paragraf div öğesi içinde dikey olarak ortalanmıştır.</p> </div> </body> </html> |
[…] […]