Css Metin Ortalama

css metin ortalama

HTML’de yazı ortalama yapabilmek için kullanabileceğiniz farklı yöntemler bulunmaktadır. Makale devamında kullanabileceğiniz yöntemleri görebileceksiniz.

Yazı ortalama yapabilmek için kullanabileceğiniz yöntemler şöyledir;

CSS ile ortalama yapabilmek için alttaki gibi bir kod kullanabilirsiniz.

CSS İle Ortalama

İstediğiniz html elementinin içeriğini ortalamak için demeniz yeterlidir.

1	<p style="text-align: center">Murat Öner</p>

Demo

<center> Elementi ile Ortalama

Alternatif olarak center elementi ile de istediğiniz elementi ortalayabilirsiniz. Üstteki p etiketinde yer alan style attribute’ünü kaldırdık ve Murat Öner metnini center etiketleri içerisine aldık.

<p>

<center>Murat Öner</center>

</p>

center elementi tüm tarayıcılar tarafından şu an kullanılabilmektedir. Fakat web standartlarından bu element kaldırılmıştır. Bundan dolayı bu alternatif yöntemi kullanmamak kodlamanızın geleceği açısından daha faydalı olacaktır.

Sonuç

Gördüğünüz gibi makale içerisinde html’de metinlerinizi ortalayabilmek için 2 farklı yöntem gösterdim ve umarım ihtiyacınızı karşılar.

📚 Kaynaklar

📚 HTML’de Yazı Ortalama İle Benzer Makaleler

✍ Lütfen “HTML’de Yazı Ortalama” konulu içerik için olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.

🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.

👋 Bir sonraki makalede görüşmek dileğiyle.

Kodcu Murat Youtube Kanalına Abone Olmayı Unutma

HTML ve CSS ile yazı ortalama yöntemleri

Bilindiği gibi, HTML ve CSS kodları web sitelerinin görünümünü belirleyen kodlardır. Bu kodlar genellikle web sitesi veya uygulaması yapmak isteyen herkes tarafından bilinir.

Html ve css ile kodlamaya yeni başlayan birinin, muhtemelen ilk yapmak istediği şeyerden biri de, bir yazıyı veya uzun bir metni ortalamaya çalışmaktır. Bu yazımızda son derece kolay olan bu birkaç yöntemi inceleyeceğiz.

HTML yazı ortalama

Boş bir sayfada yazıyı ortamak için <center> HTML etiketini kullanacağız. Bu etiketin kullanımı aşağıdaki gibidir.

<!DOCTYPE html><html><head></head><body> Html Yazı <center>Html Yazı Ortalama</center></body></html>

Yukarıdaki kodun çıktısı:

CSS yazı ortalama

Boş bir sayfada css kullanarak yazıyı ortalamak için CSS in text-align özelliği kullanılır. Bu özellik HTML etiketlerine style="text-align:center" şekinde verilir.

<!DOCTYPE html><html><head></head><body><h1>Html Yazı</h1><h1style="text-align:center">Html Yazı Ortalama</h1><h2style="text-align:center">Html Yazı Ortalama</h2><pstyle="text-align:center">Html Yazı Ortalama</p></body></html>

Yukarıdaki kodun çıktısı:

CSS yazı ortalama

CSS class kullanarak yazı ortalama

Alternatif ve daha yaygın olarak kullanılan bir yöntem de css stillerini class yapıları şeklinde kullanmaktır. Bu yöntemi bir html etiketinin içindeki yazıları ortalamak istediğimizde şu şekilde kullanırız.

<!DOCTYPE html><html><head></head><body><style>.yaziyi_ortala{ text-align:center; } </style><h1>Html Yazı</h1><h1class="yaziyi_ortala">CSS Class Yazı Ortalama</h1><h2class="yaziyi_ortala">CSS Class Yazı Ortalama</h2><pclass="yaziyi_ortala">CSS Class Yazı Ortalama</p></body></html>

Yukarıdaki kodun çıktısı:
CSS class ile yazı ortalama

CSS'te Div Ortalama

Bu dersimizde CSS ile nasıl bir div'i ortalayabileceğimizi öğreneceğiz.

margin: auto

Bir div'i ortalarken en çok kullanılan teknik margin: auto'dur.

body { font-family: Verdana, monospace, sans-serif; font-size: 12px; font-weight: bold; text-align: justify; min-height: 800px; } #deneme { width: 600px; height: 300px; padding: 20px; background-color: skyblue; }

Bu şekilde CSS kodlarına sahibiz.

Bu şekilde de bir ekran görüntüsüne sahibiz.

Bu div'i sayfada ortalamak istersek margin: auto yazmamız yeterlidir.

Görselde de görüldüğü gibi div'imiz sayfada ortalandı.

div içinde div ortalama

Bir div içinde başka bir div ortalamak için yine aynı tekniği kullanıyoruz.

#deneme { width: 600px; height: 300px; padding: 20px; background-color: skyblue; position: relative; margin: auto; } #deneme2 { width: 300px; height: 300px; background-color: violet; }

Şeklinde deneme2 ID'sine sahip yeni div'imizi deneme ID'sine sahip div'imizin içine yerleştirelim.

Yeni div'imiz ekran çıktısında da görüldüğü gibi yeni div'imizin içine yerleştirildi. Fakat henüz ortalanmadı.

#deneme { width: 600px; height: 300px; padding: 20px; background-color: skyblue; position: relative; margin: auto; } #deneme2 { width: 300px; height: 300px; background-color: violet; position: relative; margin: auto; }

Bunun için yeni div'imizin özelliklerine position: relative; margin:auto; kodlarını eklememiz yeterlidir.

Ekran görüntümüz bu şekilde olacaktır. deneme2 ID'sine sahip yeni div'imiz deneme ID'sine sahip div'imiz içinde ortalandı.

Bir div'i Sayfada Yatay ve Dikey Eksenlerde Ortalama

Bir div'i yatay ve dikey eksenlerde ortalamak için beşli bir kombinasyona ihtiyacımız var.

#deneme { width: 600px; height: 300px; padding: 20px; background-color: skyblue; }

CSS kodlarımızın bu şekilde olduğunu varsayalım.

#deneme { width: 600px; height: 300px; padding: 20px; background-color: skyblue; position: absolute; top: 50%; left: 50%; }

position özelliğini absolute olarak belirledikten sonra üstten ve sağdan %50 oranında bir ayrılma payı bırakıyorum.

Bu şekilde bir ekran görüntüsüne sahibiz; fakat henüz div'imizi sayfamızda tam olarak ortalayamadık.

#deneme { width: 600px; height: 300px; padding: 20px; background-color: skyblue; position: absolute; top: 50%; left: 50%; margin-left: -300px; margin-top: -150px; }

Daha sonra margin-left özelliğinin değerini -300px olarak belirliyorum. Bunun sebebi div'imizin genişliğinin 600px olması. Div'imizin genişliğinin yarısı kadar sola eksi değerde hücre dışı boşluk veriyorum. Aynı şekilde margin-top'a -150px vererek yukarıdan da ortalama yapıyorum. -150px olmasının sebebi ise div'imizin yüksekliğinin 300px olması. Bunun da yarısı kadar yukarı eksi kaydırma yapıyorum.

Görselde de görüldüğü gibi artık yeni div'imiz sayfamızda yatay ve dikey eksenlerde ortalandı.

#deneme { width: 320px; height: 140px; padding: 20px; background-color: skyblue; position: absolute; top: 50%; left: 50%; margin-left: -160px; margin-top: -70px; }

Div'imizin genişliği 320px ve yüksekliği 140px olsaydı margin-left değerimiz -160px (320/2), margin-top değerimiz ise -70px (140/2) olmalıydı.

Ekran görüntümüz ise bu şekilde olacaktı.

Bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.

Bu derslik bu kadar. Bir sonraki dersimizde CSS'te sözde sınıflar konusuna değineceğiz.

Diğer derse geçmek için tıklayınız. >>>

CSS’de kullandığımız içerik alanlarını (blok-level ve inline-level) elementleri nasıl oratalayacağımızı göreceğiz. Inline-level elementleri text-align:center özelliğini kullanarak ortalayabiliriz. Blok-level elementleri ortalamak için ise bir iki metod vardır. Sırası ile inceleyelim.

1- Genişleyebilir blok-level elementleri ortalamak

HTML kodu;

Genişliği sabit olmayan, genişleyebilir blok-level elementlerin ortalanması için bu metod kullanılır. Tüm web tarayıcılı bu metodu destekler.

2- Sabit genişlik atanan blok-level elementlerini ortalamak

2.a. margin auto ile genişliği belirlenmiş elementleri ortalamak

Mantık olarak, içerik blokunun sağ ve sol margin değerlerine auto ataması yapıyoruz.

W3C’de bu konu hakkında şu ifade mevcuttur: “Eğer margin-left ve margin-right değerleri auto verilirse bu blokun ortalanması anlamınagelir.”

Yanlız bir sorunumuz daha var. text-align:center ataması body içindeki tüm elementlerin ortalanmasına neden olacaktır. Bunu engellemek için bir katman oluşturup bu katman da hizalama değerini başlangıç değerine (yani sola yaslamalıyız) çevirmeliyiz.

2.b. Konumlandırma (positioning) kullanılan elementlerin negatif margin ile ortalanması

Göreceli konumlandırılmış elementleri ortalamak için bu metod kullanılabilir. Bu metod da bir önceki gibi fazladan bir katman kullanmaya gerek yoktur. Genişlik tanımı yapılan göreceli konumlandırılmış elementin margin-left değeri element genişliğinin yarısı(1/2) kadar verilerek sağlanır.

Burada sizlere bir iki metodla element ortalamayı gösterdik. Siz kullandığınız yer ve ihtiyaçlarınıza göre bunlardan birini kullanabilirsiniz.

Blok-levelCSSKonumlandırmaortalamakCSS ile sayfalarımızı ve elementlerimizi ortalamak was published on Fatih Hayrioğlu

nest...

100626 100627 100628 100629 100630