CSS Div İçerisindeki Metni Ortalama Nasıl Yapılır? (Div Yazı Ortalama)

« Google Analytics Mülk (Site) Silme Nasıl Yapılır? (Analitik Site Silme)

Herkese iyi günler dileriz. Bu yazımızda sizlere Div içindeki metni ortalama nasıl yapılır onu anlatacağız.

HTML-CSS kodlama yaparken div içerisindeki bir metni ortalama yapmak isteyebiliyoruz. Normalde div içerisine metin ortalama kolay gibi gözükse de bazen yeni başlayan yazılımcılar zorlanabiliyor. Bu yüzden sizler için CSS div içerisindeki metni, div içerisindeki yazıyı nasıl ortalayabiliriz onu anlatmak istedik. Şimdi sizlere örnek kodlar eşliğinde div içerisindeki yazıyı nasıl ortalayabiliriz onu gösterelim.

Div İçindeki Yazıyı Ortalama Nasıl Yapılır?

Div içerisindeki yazıyı ortalamak için öncelikle HTML kodlarını sizlere yazalım.

HTML Kodları

HTML kodları şu şekilde olacak:

<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div class="orta">
<a>ÖRNEK YAZI</a>
</div>
</body>
</html>

<html>

<head>

</head>

<body>

<a>ÖRNEK YAZI</a>

</div>

</body>

</html>

Yani sadece <div> kodları şöyle:

<div class="orta">
<a>ÖRNEK YAZI</a>
</div>

<a>ÖRNEK YAZI</a>

</div>

Eğer yazıyı linkli istiyorsanız kodları şu şekilde:

Eğer div içerisinde ortalayacağınız yazıya, metne link ekleyecekseniz aşağıdaki gibi a href eklemeniz lazım.

<div class="orta">
<a href="www.siteadresi.com">ÖRNEK YAZI</a>
</div>

<a href="www.siteadresi.com">ÖRNEK YAZI</a>

</div>

Şimdi en önemli nokta olan CSS kodlarına geçelim.

CSS Kodları

Metin ortalama CSS kodları şu şekilde olacak:

div {margin-bottom:50px;}
div.orta {
background: url('https://www.mmsrn.com/wp-content/uploads/2021/09/sari-arkaplan-gorsel-1.jpg') no-repeat center center fixed;
background-size: cover;
height: 200px;
display: flex;
align-items: center;
}
div.orta > a {
margin:0 auto;
color:#fff;
font-size:25px;
}

div {margin-bottom:50px;}

div.orta {

background: url('https://www.mmsrn.com/wp-content/uploads/2021/09/sari-arkaplan-gorsel-1.jpg') no-repeat center center fixed;

background-size: cover;

height: 200px;

display: flex;

align-items: center;

}

div.orta > a {

margin:0 auto;

color:#fff;

font-size:25px;

}

CSS kodlarımız ise bu şekilde olacaktır. Şimdi ekran çıktısını paylaşalım.

Gördüğünüz gibi arkadaşlar div kutusu içerisindeki yazıyı veya metni bu şekilde ortalayabiliyoruz. Normalde div içerisini html kodlarından ortalamak çok zor olabiliyor. Bu yüzden css kodlarını kullanmanızı tavsiye ederiz. Elbette birçok farklı yöntem, farklı css kodları var. Fakat sizlere temel olarak en mantıklı olanı yazdık. Bu css kodları ile div içerisindeki yazıyı dilediğiniz gibi ortalayabilirsiniz.

Bu şekilde div içerisindeki yazıyı, metini ortalayabiliyoruz. Eğer yazıya link vermek isterseniz html kodunda a href kodları eklemeniz gerekiyor. Eğer link vermeden sadece yazının altının çizgili olmasını isterseniz a href kodlarının içini boş bırakın yani link vermeyin. Böylelikle yazının altı çizgili olmuş olur. Bu arada yazı ve metin aynı anlamlara geldiği için ikisini farklı yerlerde aynı anlamlarda geçirmiş olabiliriz.

Umarız yararlı olur. İyi kodlamalar dileriz…

Bu Yazıya Tepkin Ne Oldu ?