CSS Metni Resime Göre Pozisyonlandırma (vertical-align)

Udemy'e Git

Demo

CSS Metni Resime Göre Pozisyonlandırma (vertical-align)

cArleone

BEĞEN(1)

BEĞENME(0)

GÖRÜNTÜLENME(10795)

RAPOR ET

CSS de bu dersimizde metni resme göre pozisyonlandırmayı işleyeceğiz.Normalde sayfaya bir resim ve metin koyduğumuzda yan yana.Metin altta yer alır.Biz bunu değiştirmeyi göreceğiz.Kodlara geçelim daha iyi anlarsınız.



<img class="resim" src="http://ustaderslik.com/resim/logo.png" />cArleone

Görüntüsü :

http://ustaderslik.com/resim/ders/uuk5y.png

Gördüğünüz gibi metin altta.Bazen üste veya tam ortalıklı olmasını isteriz.Ortalamak için resime vertical-align veririz.

.resim{vertical-align:middle;}

Görüntüsü :

http://ustaderslik.com/resim/ders/uuk7r.png

Resime middle verdik ve metin ortalandı.Metin üstte olmasını yapalım.



.resim{vertical-align:top;}

Görüntüsü :

http://ustaderslik.com/resim/ders/uuk9d.png

Genelde middle kullanılır.Yani metin ile resmi tam ortalamak için.

Genel örnek:



<!DOCTYPE HTML>

<html lang="en-US">

<head>

	<meta charset="UTF-8">

	<title>UstaDerslik</title>

</head>

<style type="text/css">

	.resim{vertical-align:middle;}

</style>

<body>

	

	cArleone<img class="resim" src="http://ustaderslik.com/resim/logo.png" />cArleone

	

</body>

</html>

Görüntüsü :

http://ustaderslik.com/resim/ders/uukbw.png

Kod

Kalın

Vurgu

Resim

Video

Url

CEVAPLA