CSS-align
CSS Align
How to align text in CSS?
- In CSS, you can use various properties to control the alignment of elements on a web page.
- These properties are essential for creating visually appealing and well-structured layouts.
Syntax:
text-align: justify | center | left | right | initial |inherit;
CSS properties for alignment:
Text Alignment:
- text-align: This property is used to control the horizontal alignment of text content within an element. Values include left, right, center, and justify.
p {
text-align: center;
}
Vertical Alignment:
- vertical-align: This property is mainly used for inline or inline-block elements to control their vertical alignment within their containing element.
- Values include top, middle, bottom, etc..
img {
vertical-align: middle;
}
Centering Horizontally and Vertically:
- To center an element both horizontally and vertically within its parent container, you can use a combination of display: flex on the parent and align-items: center; justify-content: center; properties.
.container {
display: flex;
align-items: center;
justify-content: center;
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>text-align property</title>
<style>
h2,
h4 {
text-align: center;
}
.main {
border: 1px solid black;
margin: 10px;
font-size: 14px;
}
#justify {
text-align: justify;
}
#left {
text-align: left;
}
#right {
text-align: right;
}
#center {
text-align: center;
}
</style>
</head>
<body>
<h2>text-align property</h2>
<div class="main">
<h4>text-align: justify;</h4>
<div id="justify">
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science
related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various
technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</div>
</div>
<div class="main">
<h4>text-align: left;</h4>
<div id="left">
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science
related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various
technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</div>
</div>
<div class="main">
<h4>text-align: right;</h4>
<div id="right">
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science
related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various
technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</div>
</div>
<div class="main">
<h4>text-align: center;</h4>
<div id="center">
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science
related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various
technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</div>
</div>
</body>
</html>
Output: