There are many ways to Align text using CSS in HTML. You can align vertical text in <div> using simply CSS approaches, Someway are:-
Before start you must know about CSS – What is CSS?
- Basic approach – For single line only
- Versatile approach – single line and multiple lines of text
- Simulating table display
- Absolute positioning
- Container element
Examples of CSS text vertical-align
1. Basic approach
It works for a single line of text though, because we set the line’s height to the same height as the containing box element.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#div1 {
height: 100px;
line-height: 100px;
text-align: center;
border: 2px dashed #f69c55;
}
</style>
</head>
<body>
<div id="div1">Hello foo</div>
</body>
</html>Output:
2. Versatile approach
This solution will work for a single line and multiple lines of text, but it still requires a fixed height container:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#div1 {
height: 100px;
line-height: 100px;
text-align: center;
border: 2px dashed #f69c55;
}
#span1 {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
</style>
</head>
<body>
<div id="div1">
<span id="span1">Hello World! <br>
Eyehunts</span>
</div>
</body>
</html>Output:
3. Simulating table display
This way may not work on older browsers that don’t support display: table and display: table-cell (basically just Internet Explorer 7).
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#div1 {
display: table;
height: 100px;
width: 100%;
text-align: center;
border: 2px dashed #f69c55;
}
#span1 {
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="div1">
<span id="span1">Hello World! <br>
Eyehunts</span>
</div>
</body>
</html>4. Absolute positioning
An absolutely positioned element setting top, bottom, left, and right to 0.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#div1 {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
width: 100%;
border: 2px dashed #f69c55;
}
</style>
</head>
<body>
<div id="div1">
<span>Hello World!</span>
</div>
</body>
</html>5. Container element (display flex)
Just add the following code to the container element:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#div1 {
height: 150px;
width: 400px;
background: #000;
font-size: 24px;
font-style: oblique;
color: #FFF;
text-align: center;
padding: 0 20px;
margin: 20px;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
</style>
</head>
<body>
<div id="div1">Hello World!</div>
</body>
</html>Note: For cross-browser compatibility for display: flex and align-items, you can use the following:
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;Source: stackoverflow.com
Do comment if you have any doubts and suggestion on this tutorial.
Note: The All HTML Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version