Css ile Html Ortalama (Yazı, Resim, Form, Tablo, Sayfa, Menü vb..)

Bu yazımızda Css ile dikey ve yatay Html ortalama işlemlerini öğreneceğiz. Ortalama işlemlerinde en çok dikkat etmemiz gereken konu Html etiketinin display değerinin ne olduğu olmalı. Bildiğiniz gibi bazı Html etiketlerinin varsayılan display değeri block iken bazıları inline değere sahiptir. Örneğin div bir block etiket iken span bir inline etikettir. Bunları bilmemiz gerekiyor çünkü ortalama işlemlerini yaparken bu durumlara göre kodumuzu yazıyoruz.

Önemli : Birazdan Html ortalama ile ilgili en basitten ileri seviye örneklere kadar göreceğiz. Burda şunu belirtmekte fayda var;

Örneğin inline değere sahip bir <span> etiketinin ortalanması ile yine inline değere sahip bir <a> etiketinin ortalanması arasında bir fark yoktur.

Yada örneğimizde biz bir <div> etiketini ortaladığımızı varsayalım, siz bunun yerine bir form, menü, sayfa, tablo vb.. aynı mantıkla ortalayabilirsiniz.

Bu örnekleri anladığınızda rahatlıkla şu işlemlerinizi gerçekleştirebilirsiniz.

Html sayfa ortalama
Html form ortalama
Resmin ortasına yazı yazma
Html tablo ortalama
Html buton ortalama vb..

Yine de takıldığınız bir yer olursa yorum bırakabilirsiniz. En kısa zamanda dönüş yapacağımdan emin olabilirsiniz.

INLINE DEĞERE SAHİP HTML ORTALAMA İŞLEMLERİ

İlk olarak inline değere sahip etiketlerin yatay ve dikey ortalanmasına bakalım. Daha sonra da block değere sahip Html etiketlerini inceleyeceğiz.

Bir yazının yatayda ortalanması

Bir yazının yatayda ortalanması için text-align özelliğine center değerini veriyoruz. Örneğin bir p etiketi içerisindeki yazıyı yatayda ortalayalım.

<style>
p {
border: 2px solid red;
padding: 20px;
text-align: center;
}
</style>
<p>Tincidunt integer eu augue augue</p>

<style>

p {

border: 2px solid red;

padding: 20px;

text-align: center;

}

</style>

<p>Tincidunt integer eu augue augue</p>

Bir yazının dikeyde ortalanması

Bir yazının dikeyde ortalanmasını 2 farklı yol ile yapabiliriz. Yazıyı dikeyde ortalarken öncelikle yazının tek satırdan mı yoksa birden çok satırdan mı oluştuğuna bakarız.

► Tek satırdan oluşan bir yazının dikeyde ortalanması için line-height özelliğini kullanabiliriz.

Örneğin bir div etiketi tanımlayalım ve 200px genişlik, 100px yükseklik değeri verelim. Yazının yatayda ortalanması için text-align özelliğine center değeri, dikeyde ortalanması için line-height özelliğine 100px değerini verelim. Bu şekilde yazımız yatayda ve dikeyde ortalanacaktır.

Burda dikkat etmemiz gereken yer line-height değeri, div’in yükseklik değeri ile aynı olmalıdır.

Birde line-height özelliğini kullanırken yazının tek satırdan oluştuğundan emin olmalıyız.

<style>
#box {
width: 200px;
height: 100px;
border: 2px solid black;
text-align: center;
line-height: 100px;
}
</style>
<div id="box">Tincidunt integer</div>

<style>

#box {

width: 200px;

height: 100px;

border: 2px solid black;

text-align: center;

line-height: 100px;

}

</style>

<div id="box">Tincidunt integer</div>

► 1’den çok satırdan oluşan bir yazının dikeyde ortalanması için ise div’e genişlik değeri verip herhangi bir yükseklik değeri vermeden, padding-top ve padding-bottom özelliklerine eşit değerler vererek dikeyde ortalayabiliriz.

<style>
#box {
width: 200px;
border: 2px solid black;
text-align: center;
padding-top: 80px;
padding-bottom: 80px;
}
</style>
<div id="box">Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod.</div>

<style>

#box {

width: 200px;

border: 2px solid black;

text-align: center;

padding-top: 80px;

padding-bottom: 80px;

}

</style>

<div id="box">Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod.</div>

Bir resmin yatayda ortalanması

Bir resmin yatayda ortalanmasını 2 farklı yol ile yapabiliriz;

► img etiketi inline değere sahip olduğu için, öncelikle display özelliğine block değerini verip daha sonra margin özelliğine auto değerini vererek ortalayabiliriz.

Bu işlemleri yaparken resme belirli bir genişlik değeri vermeyi unutmuyoruz.

► Bir diğer yol ise, img etiketini bir div içerisine alıp div’in text-align özelliğine center değerini verebiliriz.

Her iki yöntem ile de resmimiz yatayda ortalanacaktır. İlk yöntem ile resmimizi ortalayalım.

<style>
img {
display: block;
margin: auto;
border: 2px solid black;
}
</style>
<img src="../elma.jpg" />

<style>

img {

display: block;

margin: auto;

border: 2px solid black;

}

</style>

Table özelliğini kullanarak, bir yazının yatayda ve dikeyde ortalanması

Bir div içerisindeki yazıyı yatayda ve dikeyde ortalamak için table özelliğini de kullanabiliriz. Örneğin;

İç içe 2 adet div oluşturalım.

Dıştaki div’in display özelliğine table değerini verelim.

İçteki div’in display özelliğine ise table-cell değerini verelim.

Yatayda ortalanması için text-align özelliğine center değerini, dikeyde ortalanması için vertical-aling özelliğine middle değerini verelim.

<style>
#box1 {
width: 240px;
height: 300px;
background-color: cornflowerblue;
margin: auto;
padding: 10px;
display: table;
}
#box2 {
text-align: center;
vertical-align: middle;
display: table-cell;
color: #fff;
font-size: 22px;
}
</style>
<div id="box1">
<div id="box2">
Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod.
</div>
</div>

<style>

#box1 {

width: 240px;

height: 300px;

background-color: cornflowerblue;

margin: auto;

padding: 10px;

display: table;

}

#box2 {

text-align: center;

vertical-align: middle;

display: table-cell;

color: #fff;

font-size: 22px;

}

</style>

Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod.

</div>

BLOCK DEĞERE SAHİP HTML ORTALAMA İŞLEMLERİ

Şimdi de block etiketlerin ortalanmasına bakalım.

Bir block etiketin yatayda ortalanması

Bir block etiketi yatayda ortalamak için yazmamız gereken 2 kod var. Bunlar;

► İlk olarak etiketimize bir genişlik değeri vermemiz gerekiyor. Bunu px olarak verebildiğimiz gibi % (yüzde) olarak da verebiliriz. Yüzde olarak değer verdiğimizde, tarayıcı boyutu değişse bile etiketimiz hep o oranda yatayda ortalanacaktır.

► İkinci olarak ise margin özelliğine auto değerini vermemiz gerekiyor. Bu kod ile etiketin sağında ve solunda eşit değerde boşluk bırakmış olacağız.

⇒ margin:auto; yazmak yerine şöylede yazabiliriz;

margin-right:auto;
margin-left:auto;

margin-right:auto;

margin-left:auto;

Örneğimizde genişlik değerini yüzde olarak verip yatayda ortalayalım.

<style>
#box {
width: 60%;
height: 100px;
background-color: cornflowerblue;
margin: auto;
}
</style>
<div id="box"></div>

<style>

#box {

width: 60%;

height: 100px;

background-color: cornflowerblue;

margin: auto;

}

</style>

Bir block etiketin yatayda ve dikeyde ortalanması

Bir block etiketi yatayda ve dikeyde ortalamak için yani sayfanın tam ortasında olması istiyorsak şunları yapmamız gerekiyor;

► Öncelikle genişlik ve yükseklik değeri veriyoruz.

► Margin özelliğine auto değeri veriyoruz.

► Position özelliğini absolute yapıp, top özelliğine 50% değerini ve left özelliğine 50% değerini veriyoruz. Böylece yukardan ve soldan 50% kaydırmış olacağız.

► Sayfanın tam ortasında olması için margin-left özelliğine genişliğinin yarısının eksi değerini, margin-top özelliğine yüksekliğinin yarısının eksi değerini veriyoruz.

Bu şekilde yaptığımızda, tarayıcının boyutunu değiştirsek bile sürekli sayfanın tam ortasında olacaktır.

<style>
#box {
width: 100px;
height: 100px;
background-color: cornflowerblue;
margin: auto;
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
<div id="box"></div>

<style>

#box {

width: 100px;

height: 100px;

background-color: cornflowerblue;

margin: auto;

position: absolute;

left: 50%;

top: 50%;

margin-top: -50px;

margin-left: -50px;

}

</style>

Ortalanacak nesnenin genişlik ve yükseklik değeri bilinmeden yatayda ve dikeyde ortalanması

Bu şekilde bir ortalama için transform özelliğini kullanıyoruz. Örneğimizde buton’un genişlik ve yükseklik değerini bilmeden yatayda ve dikeyde ortalayalım.

<style>
div {
width: 240px;
height: 160px;
background-color: cornflowerblue;
position: relative;
}
button {
padding: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div>
<button>Mehsatek</button>
</div>

<style>

div {

width: 240px;

height: 160px;

background-color: cornflowerblue;

position: relative;

}

button {

padding: 10px;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

</style>

<div>

<button>Mehsatek</button>

</div>

Flex özelliğini kullanarak yatayda ortalama

<style>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
color: white;
width: 100px;
height: 100px;
}
</style>
<div class="flex-container">
<div></div>
</div>

<style>

.flex-container {

display: flex;

justify-content: center;

align-items: center;

height: 200px;

background-color: DodgerBlue;

}

.flex-container > div {

background-color: #f1f1f1;

color: white;

width: 100px;

height: 100px;

}

</style>

</div>

Css ile Html ortalama işlemleri bu şekilde.

Umarım sizin için yararlı bir yazı olmuştur.

Html ve Css ile ilgili eksikleriniz olduğunu düşünüyorsanız, Html ve Css Dersleri ile ilgili yazmış olduğum yazı serilerini inceleyebilirsiniz.

Şu yazılarda ilginizi çekebilir.

Html ve Css ile Breadcrumb (İçerik Haritası) Yapımı

Css ile Tooltip Yapımı

Css ile Yatay Menü Yapımı

Css ile Dikey Menü Yapımı

Css ile Buton Yapımı (3d Buton, Yuvarlak Buton, Animasyonlu Buton vb..)

Yeni bir yazımda görüşmek üzere.

Css ile Html Ortalama (Yazı, Resim, Form, Tablo, Sayfa, Menü vb..)

INLINE DEĞERE SAHİP HTML ORTALAMA İŞLEMLERİ

Bir yazının yatayda ortalanması

Bir yazının dikeyde ortalanması

Bir resmin yatayda ortalanması

Table özelliğini kullanarak, bir yazının yatayda ve dikeyde ortalanması

BLOCK DEĞERE SAHİP HTML ORTALAMA İŞLEMLERİ

Bir block etiketin yatayda ortalanması

Bir block etiketin yatayda ve dikeyde ortalanması

Ortalanacak nesnenin genişlik ve yükseklik değeri bilinmeden yatayda ve dikeyde ortalanması

Flex özelliğini kullanarak yatayda ortalama

Yazar Hakkında

Yorum Yazın

INLINE DEĞERE SAHİP HTML ORTALAMA İŞLEMLERİ

Bir yazının yatayda ortalanması

Bir yazının dikeyde ortalanması

Bir resmin yatayda ortalanması

Table özelliğini kullanarak, bir yazının yatayda ve dikeyde ortalanması

BLOCK DEĞERE SAHİP HTML ORTALAMA İŞLEMLERİ

Bir block etiketin yatayda ortalanması

Bir block etiketin yatayda ve dikeyde ortalanması

Ortalanacak nesnenin genişlik ve yükseklik değeri bilinmeden yatayda ve dikeyde ortalanması

Flex özelliğini kullanarak yatayda ortalama

Benzer Yazılar

Yazar Hakkında

Yorum Yazın