Yaklaşmışım
Yaklaşmışım
Image for post

9 Ocak 2021 - Yazar: Admin

Css kutu ortalama

Merhaba, bu yazımda cssde herhangi bir yazıyı veya tagı nasıl yükseklik ve genişlik biçiminden ortalayacağımızı göstereceğim.

Bundan önce çoğumuz çeşitli hilelerle bu işlemi yapıyorduk. Bu hilelerin bazıları şu şekildeydi: ilk önce bütün içerikleri kapsayan bir div açıyorduk, onun içine bir div daha açıp bilgileri içerisine yazıyorduk ve çok fazla gereksiz css kodu yazıyorduk.

sözü kısa kesersek. Html Kodlar:

1
<div class=”container”>
2
  <div>
3
   <p>
4
       İçerik
5
   </p>
6
 </div>
7
 </div>

Css Kodları:

<style>
.container{
display: flex;
justify-content: center;
align-items: center;
width: 90%;
height: 250px;
padding: 10px;
background-color: #fafafa;
border: 1px solid #e0e0e0;
border-radius: 5px;
margin: 0 auto;
box-shadow: 0 0 10px -8px #000000;
}
.container p{
font-weight: 300;
font-family: “Roboto”, sans-serif;
color: #707070;
padding: 10px;
background-color: #fdfdfd;
border: 1px solid #e0e0e0;
border-radius: 5px;
box-shadow: 0 0 10px -8px #000000;
}
</style>

Bu kadar css kodunun içinden sadece kırmızı ile işaretli olan kodlar ortala maktadır. Displayi flex olarak belirledikten sonra justify-content :center veriyoruz ve yatay olarak ortalıyoruz, align-items:center vermek ile dikey olarak ortalıyoruz. Buradan dikkat etmemiz gereken ise bu kodlar verdiğiniz tagın içerisindeki kodu verdiğiniz tagın boyutlarına göre ortalar.

Ön izleme;

İçerik


Katagoriler:

blog, Genel

Etiketler:

, , ,