Text align - Metin hizalaması
Kursa 27.99 TL'ye kayıt olmak için TIKLAYINIZ.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text align - Metin Hizalama</title>
<style>
div{
border:1px solid red;
}
div.center {
text-align: center;
}
div.left {
text-align: left;
}
div.right {
text-align: right;
}
div.justify {
text-align: justify;
}
p{
border:1px solid red;
height: 300px;
}
.uzunMetin{
display: table-cell;
vertical-align: top;
}
.kisaMetin{
display: table-cell;
vertical-align: bottom;
}
</style>
</head>
<body>
<p class="uzunMetin">Lorem ipsum dolor sit, amet consectetur adipisicing.
Lorem ipsum dolor sit, amet consectetur adipisicing.
Lorem ipsum dolor sit amet consectetur adipisicing.
Lorem ipsum dolor sit, amet consectetur adipisicing.
Lorem ipsum dolor sit, amet consectetur adipisicing.
Lorem ipsum dolor sit amet consectetur adipisicing.
Lorem ipsum dolor sit, amet consectetur adipisicing.
Lorem ipsum dolor sit, amet consectetur adipisicing.
Lorem ipsum dolor sit amet consectetur adipisicing.
</p>
<br>
<p class="kisaMetin">Lorem ipsum dolor sit amet.</p>
<br>
<div class="left"> Naber </div>
<br>
<div class="right"> Naber </div>
<br>
<div class="center"> Naber </div>
<br>
<div class="justify">
Lorem ipsum dolor sit amet consectetur adipisicing.
Lorem ipsum dolor sit, amet consectetur adipisicing.
Lorem ipsum dolor sit, amet consectetur adipisicing.
Lorem ipsum dolor sit amet consectetur adipisicing.
Lorem ipsum dolor sit, amet consectetur adipisicing.
Lorem ipsum dolor sit, amet consectetur adipisicing.
Lorem ipsum dolor sit amet consectetur adipisicing.
</div>
</body>
</html>