forum

Home / DeveloperSection / Forums / How do I vertically align text in a div, please provide sample?

Ask Question

How do I vertically align text in a div, please provide sample?

Gautam Ramesh9931-Jul-2023

How do I vertically align text in a div, please provide sample?

htmljquery ui html element 
Updated on 01-Aug-2023
Gautam Ramesh

Gautam Ramesh

Follow
I am Gautam Ramesh from Uttar Pradesh. Have completed my B. Tech. course from MNNIT campus Prayagraj in 2022. I have good knowledge of computer networking.

Can you answer this question?

Answer

1 Answers

Aryan Kumar

Aryan Kumar

01-Aug-2023

There are a few ways to vertically align text in a div. Here are a few methods:

Using CSS

The simplest way to vertically align text is to use CSS. You can add the following CSS rule to your HTML document:

CSS

div {
  vertical-align: middle;
}

This will vertically align the text in the div to the middle of the div.

Using JavaScript

You can also vertically align text using JavaScript. The following JavaScript code will vertically align the text in the div to the middle of the div:

JavaScript

function verticallyAlignText(div) {
  var divHeight = div.clientHeight;
  var divText = div.textContent;
  var textHeight = divText.length * 16;
  var divTop = (divHeight - textHeight) / 2;
  div.style.top = divTop + "px";
}

// Call the function
verticallyAlignText(document.getElementById("myDiv"));

This code will first get the height of the div and the height of the text in the div. Then, it will calculate the top position of the text in the div and set the top property of the div to the calculated value.

Using Flexbox

You can also vertically align text using Flexbox. Flexbox is a CSS layout system that allows you to easily control the layout of elements on a page. To vertically align text using Flexbox, you can add the following CSS code to your HTML document:

CSS

div {
  display: flex;
  align-items: center;
}

This will vertically align the text in the div to the center of the div.

Here is an example of how to vertically align text in a div using CSS:

HTML

<html>
<body>

<div id="myDiv">
  This is some text.
</div>

<style>
div {
  vertical-align: middle;
}
</style>

</body>
</html>

This code will create a div with the text "This is some text". The text will be vertically aligned to the middle of the div.

Liked By