CSS ile Ortalama Kodu

Anıl ALAN 6 Mayıs 2022

1 dakika okuma süresi

Herkese merhaba, bu yazımızda sizlerle html ortalama işlemlerinde hangi css kodlarını kullanacağımızı göreceğiz. Bir yazıyı, görseli ya da butonu ortalayabiliyoruz. Bunların örneklerini tek tek sizlerle uygulayacağız.

HTML CSS ile Yazı Ortalama

Aşağıdaki örneğimizde paragraf etiketleri arasındaki yazımızı ortalayacağız.

<p style="text-align:center">Bu yazı ortada gözükmekte</p>

ortalanmisparagraf e1651848128173

Yukarıdaki şekilde inline olarak css kullanabiliriz. Ya da direkt p etiketine class olarak center ismi verip css kısmından değiştirebiliriz. Gelin bu örneği de beraberinde inceleyelim.

<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
 <style>
 .center{
text-align:center;
 } 
</style>
</head>
<body>
<p class="center">Bu yazı ortada gözükmekte</p>
</body>
</html>

Yukarıdaki örnekteki yöntem ile sürekli inline css kullanmak yerine sadece center class’ı vermeniz yeterli olacaktır.

HTML CSS ile Div Ortalama

Css ile div ortalamak için margin: auto kodunu kullanabilirsiniz.

<!DOCTYPE html>
<html>
<title>Div Ortalama</title>
<head>
<style>
#ortala {
    width: 80%;
    height: 100px;
    padding: 20px;
    background-color: #000;
    margin: auto;
}
</style>
</head>
<body>
<div id="ortala"></div></html>
</body>
</html>

Css Flex Özelliğini Kullanarak Ortalama

Flex özelliği bizlerin responsive yapıları çok daha kurmamız için sağlanmıştır. Flex özelliğini kullanmamız için öncelikle üst divimize display: flex; özelliğini vermemiz gerekiyor.

<style>
.flex-yapimiz{
display:flex;
}
</style>

justify-content:center , içindeki elemanları yatayda ortalamaya yarar.

align-items: center, içindeki elemanları dikeyde ortalama yarar.

Flexbox özelliğini kullanmak isterseniz aşağıdaki üçlü oldukça işinize yarayacaktır.

display: flex;
justify-content: center;
align-items: center;

Html ve CSS ile ilgili sorularınızı yorum olarak paylaşabilirsiniz. Css ile hizalama için block ve inline-block olarak birçok yöntem bulunmakta. Sizler için bu yazıya ek W3Schools sitesindeki dökümanları okumanızı da tavsiye ediyoruz.

Etiketler