How to create a css vertical text?

In css, vertical text is a common problem for beginners. There are a lot of methods for setting your text vertically center. Nowadays, we have seen on various websites that their content is vertically center or a div set on vertically center. You can also set your content like that. In this article, we are trying to help you. Just follow any method.

Basic approaches for css vertical text

  1. Line-height: By using line height will set your text vertically center. In this approach, you must remember you have only single-line text. The line-height property of CSS gives a lot of space in between two or more lines. So we suggest if you have only single-line text, you should use line-height property. Generally, we use line-height property for the header or a bar where its height is below 100px.
<html>
<head>
<title> vertical center text </title>
<style>
.header{width:100%; height:100px; line-height:100px;}
</style>
</head>
<body>
<div class="header"> Lorem Ipsum </div>
</body>
</html>

2. Vertical-Align: This is a more versatile approach for setting up your text vertically center. The vertical-align property will help you in setting up your text vertically center. This property also used for multi-line text. But vertical-align property needs a fixed height container. If you have a fixed height container then your css vertical text will be center.

<html>
<head>
<title> vertical center text </title>
<style>
.container{width:100%; height:200px;}
.content{display:inline-block; vertical-align:middle}
</style>
</head>
<body>
<div class="container">
 <div class="content"> Lorem Ipsum </div>
</div>
</body>
</html>

In this code, we need a container, and we set its height. Then we set our content div as display: inline-block and vertical-align: middle. It set content div vertically center text.

3. Display as a table: This method also may help you in vertically center text. In this approach, we need to set our div as a table. By using display: table, our div behaves like the table. This method is almost the same as vertical-align.

<html>
<head>
<title> vertical center text </title>
<style>
.table{width:100%; height:auto; display:table}
.table-cell{display:table-cell; vertical-align:middle}
</style>
</head>
<body>
<div class="table">
 <div class="table-cell"> lorem ipsum </div>
</div>
</body>
</html>

4. The Position Approach: We use position: absolute to our child div and relative to our parent div by this technique. Then we use the transform property for vertically center text. But this approach is not as much cool as others. This technique is used by very few people.

<html>
<head>
<title>vertical center text </title>
<style> 
.container{width:100%; height:100%; position:relative;}
.content{position:absolute; left:50%;top:50%; transform:translate(-50%,-50%)}


</style>
</head>
<body>
<div class="container">
<div class="content"> vertical center text</div>

</div>
</body>
</html>

5. Display Flex: This is the most popular method. By using this method, our divs are responsive. We suggest using this technique for creating a vertical center text. In this method, there are no limits and no disadvantages. First of all, you need to set a parent div as display flex; then, you need to align-item: center and also justify-content: center. This is a very easy method.

<html>
<head>
<title>vertical center text </title>
<style> 
.container{width:100%; height:100%; display:flex; align-items:center; justify-content:center}


</style>
</head>
<body>
<div class="container">
<div class="content">css vertical text</div>

</div>
</body>
</html>

This is how we can create a css vertical text?. Any above-mentioned methods u can use for vertically center text.

Conclusion Paragraph: In this article, we described a lot of methods for setting up a css vertical text?. It’s up to you which method you like most and, use one of them. If still, you need help, one of our team members will assist you. Just leave a comment in the comment section below. Also, comment if you want to give any suggestions or you need any particular tutorial. We always welcome your suggestions.

Also, you can read our recent article for CSS tricks and JavaScript tricks. These articles will be very helpful for you. You can read all of them just by clicking here.

Leave a Comment