Aligning text with CSS in html
Using CSS stylesheets in HTML web page is a commercial way to bold, italicize, underline, format, and apply multiple CSS effects and properties to web page text and represent any web page content graphically and professionally. CSS gives your boring web page a more attractive and commercial format behaviour. You can design or develop a commercial and advanced web page by learning CSS scripting language.
Underlining text with CSS in HTML web page.
Text alignment with CSS.
text-align – Using CSS text-align properties, you can control and manage the horizontal behaviour of text inside the containing text element in your paragraph.
CSS text-align properties.
- left – Aligns any CSS paragraph text in the left order of its container.
- center – Aligns any CSS paragraph text in the center order within its container.
- right – Aligns any CSS text in the right order of its container.
- justify – Spreads any CSS text in both left and right order to fit the width of its container on both sides, it justifies and aligns text on both left and right sides.
CSS text alignment examples.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Multiple Css Text Alignment Properties</title>
<style>
.left-align {
text-align: left;
}
.center-align {
text-align: center;
}
.right-align {
text-align: right;
}
.justify-align {
text-align: justify;
}
</style>
</head>
<body>
<p class=”left-align”>The Text Aligned In Left Direction</p>
<p class=”center-align”>The Text Aligned In Center Direction</p>
<p class=”right-align”>The Text Aligned In Right Direction</p>
<p class=”justify-align”>The Text Aligned In Justify Direction. It Fit Text From Left And Right Direction From Both Side</p>
</body>
</html>
CSS vertical text alignment.
vertical-align – Controls and manages the vertical text alignment behaviour of any CSS text inline or inline-block elements within their line boxes.
CSS vertical text-align properties.
- baseline – This property aligns the baseline of any CSS element with its parent’s baseline by default.
- top – Previews the top of any CSS element by aligning it with the top-of-the-line box.
- center – Previews the vertical midpoint of any CSS element by aligning it with the midpoint of the line box.
- bottom – Previews and aligns the bottom portion of any CSS element with the bottom portion of the line box.
CSS vertical text-align example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Css Vertical Alignment Properties</title>
<style>
.container {
color:red;
font-size:2em;
height: 80px;
border: 2px solid #111;
line-height: 90px;
text-align:center;
}
.baseline {
vertical-align: baseline;
}
.top {
vertical-align: top;
}
.middle {
vertical-align: middle;
}
.bottom {
vertical-align: bottom;
}
</style>
</head>
<body>
<div class=”container”>
<span class=”baseline”>Baseline Properties,</span>
<span class=”top”>Top Properties,</span>
<span class=”middle”>Middle Properties,</span>
<span class=”bottom”>Bottom Properties,</span>
</div>
</body>
</html>
Text Alignment in CSS Flexbox.
Using the flexbox element features in CSS, text alignment is controlled and managed with additional CSS properties.
- align-items – aligns flex text items or content along the cross axis in CSS flexbox.
- justify-content – This flexbox property aligns CSS text in a flex element along the main axis.
Flexbox Alignment Example in CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Css Flexbox Alignment Properties</title>
<style>
.flex-container {
color:blue;
font-size:3em;
display: flex;
height: 90px;
border: 3px solid #111;
justify-content: center; /* it Aligns flex container items horizontally order*/
align-items: center; /* it Aligns css flex container items vertically order */
}
</style>
</head>
<body>
<div class=”flex-container”>
<p>Let Align Css Text Alignment With Flex Properties</p>
</div>
</body>
</html>
Text alignment in grid layout in CSS.
Grid layout order in CSS controls and manages the text display order using text alignment properties.
justify-items – Previews and aligns grid items in CSS text horizontally ordered within their grid area. align-items – Aligns grid items in any CSS text in vertical order within their grid area.
Grid layout alignment example in CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Css Grid Layout Alignment Properties</title>
<style>
.grid-container {
color:red;
display: grid;
height: 120px;
grid-template-columns: 1fr 1fr;
border: 2px solid #111;
}
.grid-item {
font-size:2em;
display: flex;
justify-content: center; /* it Aligns css text horizontally order */
align-items: center; /* it Aligns css text vertically order*/
border: 2px solid #000;
}
.grid-item {
display: flex;
justify-content: center; /* it Aligns css class text horizontally order*/
align-items: center; /* it Aligns css class text vertically order*/
border: 2px solid #ccc;
}
</style>
</head>
<body>
<div class=”grid-container”>
<div class=”grid-item”>Flex Box Element 1</div>
<div class=”grid-item”>Flex Box Element 2</div>
<div class=”grid-item”>Flex Box Element 3</div>
<div class=”grid-item”>Flex Box Element 4</div>
</div>
</body>
</html>
About Inline CSS Properties.
CSS Flexbox and CSS Grid provide powerful properties and features for both horizontal and vertical text alignment operations.
You can use simple horizontal text-align for text within block elements as per your web development needs.
Vertical-align in CSS is better suited for inline or inline-block elements. Today, to create modern web page/website layouts, Flexbox and Grid CSS properties are often used for more complex alignment requirements.
