![[தமிழில்] HTML & CSS Online Course](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV0_zjRmsQE0iWNlBSqfVRePPYitmf958RmAd79lMu1aWw2KITJkTwE_ENqkTkC0rMsj_Xrpe5aeI4EIM9aDZJqWK_7inZZWjx_HpHEz1kfukoLUPODXVU9fnQylB1mFqg-L9Rj7NWqpk/s300/300_200_two.png)
ஒரு text-யை horizontal ஆக Alignment செய்வதற்கு Text Align என்கிற property பயன்படுத்தப்படுகிறது.
Text Align property-யை பயன்படுத்தி ஒரு text-யை நான்கு விதமாக Align பண்ண முடியும்.
1.left
2.right
3.center
4.justify
வலப்பக்கமும் இடப்பக்கமும் ஒரே மாதிரியாக align செய்வதுதான் justify ஆகும்.
Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
</style>
</head>
<body>
<h1>CSS Tutorial (center)</h1>
<h2>CSS Tutorial (left)</h2>
<h3>CSS Tutorial (right)</h3>
</body>
</html>
Output:
Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: justify;
}
</style>
</head>
<body>
<h1>CSS என்றால் என்ன?</h1>
<p>CSS என்பதனின் விரிவாக்கம் Cascading Style Sheet ஆகும். CSS ஆனது HTML element-க்கு அழகான தோற்றத்தைக் கொடுக்கின்றது.CSS யை பயன்படுத்துவதால் நிறைய வேலைகளானது குறைக்கப்படுகிறது.</p>
</body>
</html>
Vertical Align
Vertical Align property-யைப் பயன்படுத்தி ஒரு element-யை Vertical-ஆக Align பண்ண முடியும்.Vertical align property-க்கு கொடுக்கப்படும் value ஆனது top,bottom, middle ஆகும்.
top என்கிற value ஆனது image-ன் உடைய top-ம் text-ன் உடைய top-ம் சமமாக இருக்கும்.
Bottom என்கிற value-வை கொடுக்கின்ற போது image-ன் உடைய Bottom-மும் text-ன் உடைய Bottom-மும் சமமாக இருக்கும்.
Top:
<html>
<head>
<style>
.top {
vertical-align: top;
}
</style>
</head>
<body>
<p> <img class="top" src="https://lh3.googleusercontent.com/7cOAy1-NeAyA5fKWxFqSeKWHLbm5Yd9yH3oKVwuOizSoyokz71bI7uhXOxHFZTgSwfs" width="400" height="200"> Techysaw.blogspot.com</p><br>
</body>
</html>
Output:
Middle:
<html>
<head>
<style>
.middle {
vertical-align: middle;
}
</style>
</head>
<body>
<p> <img class="middle" src="https://lh3.googleusercontent.com/7cOAy1-NeAyA5fKWxFqSeKWHLbm5Yd9yH3oKVwuOizSoyokz71bI7uhXOxHFZTgSwfs" width="400" height="200"> Techysaw.blogspot.com</p><br>
</body>
</html>
Output:
Bottom:
<html>Output:
<head>
<style>
.bottom {
vertical-align: bottom;
}
</style>
</head>
<body>
<p> <img class="bottom" src="https://lh3.googleusercontent.com/7cOAy1-NeAyA5fKWxFqSeKWHLbm5Yd9yH3oKVwuOizSoyokz71bI7uhXOxHFZTgSwfs" width="400" height="200">Techysaw.blogspot.com</p>
</body>
</html>
![[Tamil] How to create React Application](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW8d-UOiQT7jAqr1Ep5yEP3cJk7OoBzC-gA7GQbTa1l3Jg6ov48ggfQmlgWj0fSpo8EmQjYgL2z0MRvAsfmcuPHfzK_QEL_7K1ZqbKOmxLEnjg9jH1ZB5AUOKDempIqHlt3obOWhJJNNM/s72-c/node_npm_version.png)
![[Tamil] Width and Height Using CSS In Tamil](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAylJcAp4QVKwr-YSHaK9UuXEYdDNHoXSmgAMrhouWJzkVUhIE78h1JBTAXuAXaj6JSXWV5uaNGmm4Rf5yrL8a6jyFCucViWXVy4zemDRdfaK4h_pDvXPH1wIFxrvwPaM89qY8Cccivcc/s72-c/width+and+height.jpg)
![[Tamil] CSS Colors In Tamil](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWik-zqoewl_4rECbqiXTCH8JDOd1-KzBLir6kDtcXvckUGviR8qrVssIbwhVYTjg34tvnEBI1JNGl3t-IS5FLxnnp0N_oRIWtraqnhnMkrp0hsJgEjLLUutR4Je9cZ3Mh7hZx7l0EUPc/s72-c/0b743151-3e0f-4449-ae13-4289151a166f.jpg)
![[Tamil] How to add css in tamil](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBee2UdJwVztGLVJtCKSy8TX3AeWGNCnbpn26IYFVMvEIsKI1aFJyN_kPukHTsoMOQjBTqIXx6w0Zoy85z-tDiNcGYA59-B3_G_3tTFzxwS70M_u_zCP04-uZGPjzk7DzbvFhdi6Csdac/s72-c/add+css.jpg)
No comments:
Post a Comment