In this article we will show you the solution of align text vertically css, we align text items vertically in CSS using the Flexbox property. We will see two different examples below. Let us know about CSS Flexbox first.
Now to align items vertically we will set some properties like display to flex, justify-content to center, align-item to center, and text-align to center.
Step By Step Guide On Align Text Vertically CSS :-
Method 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> align text vertically CSS </title>
<style>
body{
background-color: rgb(51, 50, 50);
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
h1{
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
h3{
color : rgb(95, 194, 95) ;
font-size: 20px;
}
p{
color: antiquewhite;
font-size: large;
}
.full-screen {
height: 100vw;
width: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex: content;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> align text vertically CSS </h3>
</center>
<div class="full-screen">
<p>
WELCOME TO TALKERSCODE
</p>
</div>
</body>
</html>
- writing HTML code <!DOCTYPE html> is used to specify the HTML version that a file is written in.
- The <HTML> tag used to specify the root of an HTML document must then be written. Additionally, add the </html> tag at the end.
- The metadata for the HTML file is contained in the <head> tag, which is closed with </head> tag.
- The HTML document's <title> is then established using the title tag, which is followed by the < /title> tag.
- We'll use an external CSS file to style the HTML page.
- The <h1> element is used to add a heading, and the </h1> tag is used to close it.
- creating a <div> with the class of full-screen. And write some text within <p> tag
- using <style> tag to add CSS
- set the height and width of the div. set the display to flex.
- Now set the justify-content to center, align-items to center, text-align to center, and flex to center.
Method 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> align text vertically CSS </title>
<style>
body{
background-color: rgb(51, 50, 50);
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
h1{
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
h3{
color : rgb(95, 194, 95) ;
font-size: 20px;
}
.box {
height: 150px;
width: 150px;
color: darkred;
background-color: gold;
border: 5px solid red;
text-align: center;
}
.container {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> align text vertically CSS </h3>
</center>
<div class="container">
<div class="box">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, repellendus!
</div>
</div>
</body>
</html>
- writing HTML code <!DOCTYPE html> is used to specify the HTML version that a file is written in.
- The <HTML> tag used to specify the root of an HTML document must then be written. Additionally, add the </html> tag at the end.
- The metadata for the HTML file is contained in the <head> tag, which is closed with </head> tag.
- The HTML document's <title> is then established using the title tag, which is followed by the < /title> tag.
- We'll use an external CSS file to style the HTML page.
- The <h1> element is used to add a heading, and the </h1> tag is used to close it.
- creating a <div> with the class of container. adding a new <div> of a class of box to it. Write some text into it.
- using <style> tag to add CSS
- for the box class, set the height, width, color, background-color, and border first. Then set the text-align property to center
- for the container class, set the display to flex. Also, set the justify-content property to center.
Conclusion :-
At last, here in conclusion, we can say that with this article’s help, we know How to align text vertically in CSS.
I hope this article on align text vertically css helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
