CODEWITHSUNDEEP
htmlcss
user2054574
user2054574

Reputation: 359

How to set text in the middle (horizontally and vertically)?

enter image description here

This is my html and css

<div id="name">
<p>TEST TEST TEXT</p>
</div>

#name{
  width: 200px;
  height: 50px;
  background: #019fde;
  border-radius: 10px;
}

How to set text in the middle (horizontally and vertically)?

Upvotes: 0

Views: 5529

Answers (3)

Steve Wellens
Steve Wellens

Reputation: 20640

This will do it:

  text-align: center;
  display: table-cell;
  vertical-align: middle;

http://jsfiddle.net/Z8S8H/

Upvotes: 1

braican
braican

Reputation: 2202

you could also not bother wrapping the p in a div and simply give the p tag consistent padding on the top and the bottom that will achieve your desired height while also setting text-align:center.

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128776

If it's just one line you can use line-height. Set line-height to the same height as the element (50px in this case) and your text will be in the middle.

To align the text centrally, simply use text-align:center;

Upvotes: 2

Related Questions