How do I vertically align text in a paragraph?

Question

I would like to know to align the text in a p element to be vertically centered.

Here are my styles:

p.event_desc {
     font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
     line-height: 14px;
     height: 35px;
     margin: 0px;
}

<p class="event_desc">Lorem ipsum.</p>

Possible dublicate: http://stackoverflow.com/questions/10939288/how-can-i-vertically-center-text-in-a-dynamically-high-div/10939940 — doptrois, Jun 15 '12 at 14:40
A very great reference for aligning different element-combinations horizontally or vertically can be found on [css-tricks.com](https://css-tricks.com/centering-css-complete-guide/). — ˈvɔlə, Aug 31 '20 at 10:42

score 78 · Accepted Answer · edited Mar 16 '18 at 07:48

78

Try these styles:

p.event_desc {
  font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 14px;
  height:75px;
  margin: 0px;
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
  border: 1px solid #f00;
}

<p class="event_desc">lorem ipsum</p>

edited Mar 16 '18 at 07:48

Willie Chalmers III

1,151
1
16
29

answered Jun 15 '12 at 13:55

Dipak

11,930
1
30
31

I'm new to HTML CSS. I tried hard to look for an answer that doesn't involve tables (because apparently they're bad...). This answer was just too simple to pass up on so I'm using it. – V Maharajh Mar 16 '15 at 22:40
@vivekmaharajh Using HTML table tags for layout is bad. I don't believe it's bad to use table in `display` for things like this. – Keavon Aug 04 '15 at 02:25
What if you want the paragraph to span the entire width but it only contains a couple of words? – Giulio Piancastelli Sep 19 '17 at 14:30
Except now I can't – mae Sep 14 '18 at 15:04

score 39 · Answer 2 · answered Jun 15 '12 at 13:52

39

You can use line-height for that. Just set it up to the exact height of your p tag.

p.event_desc {
  line-height:35px;
}

answered Jun 15 '12 at 13:52

Andres I Perez

75,075
21
157
138

2

@Gatekeeper in such a case we can simply align the paragraph inside a container to vertically center it. Such as with this method: [Centering in the Unknown](http://css-tricks.com/centering-in-the-unknown/). – Andres I Perez Jun 15 '12 at 14:08
whow, you actually made to learn something new on friday afternoon... cool :-D – Gatekeeper Jun 15 '12 at 14:12
2

everyone loved valign back in the table-layout days! ;) – Luca Jun 15 '12 at 14:23

Edgar Chávez · Answer 3 · 2019-09-07T03:30:16.033

12

If the answers that involve tables or setting line-height don't work for you, you can experiment with wrapping the p element in a div and style its positioning relative to the height of the parent div.

.parent-div{
  width: 100px;
  height: 100px;
  background-color: blue;
}

.text-div{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

p.event_desc{
  font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: white;
  text-align: center;
}

<div class="parent-div">
  <div class="text-div">
   <p class="event_desc">
    MY TEXT
   </p>
  </div>
</div>

edited Sep 07 '19 at 03:30

answered Sep 07 '19 at 03:23

Edgar Chávez

119
1
4

This only appears to work with the parent element having a set height. – Martin May 22 '20 at 12:17
This is exactly what I needed! All of the other answers didn't work for me as I was using inline-block elements. – Roodey Jun 19 '23 at 13:12

score 5 · Answer 4 · answered Feb 18 '21 at 17:50

So personally I'm not sure of the best-method way, but one thing I have found works well for vertical alignment is using Flex, as you can justify it's content!

Let's say you have the following HTML and CSS:

.paragraph { 
      font-weight: light;
      color: gray;
      min-height: 6rem;
      background: lightblue;
  }

<h1 class="heading"> Nice to meet you! </h1>
<p class="paragraph"> This is a paragraph </p>

We end up with a paragraph that isn't vertically centered, now if we use a Flex Column and apply the min height + BG to that we get the following:

.myflexbox {
    min-height: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: lightblue;
}

.paragraph { 
      font-weight: light;
      color: gray;
  }

<h1 class="heading"> Nice to meet you! </h1>
<div class="myflexbox">
    <p class="paragraph"> This is a paragraph </p>
</div>

However, in some situations you can't just wrap the P tag in a div so easily, well using Flexbox on the P tag is perfectly fine even if it's not the nicest practice.

.myflexparagraph {
    min-height: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: lightblue;
}

.paragraph { 
      font-weight: light;
      color: gray;
  }

<h1 class="heading"> Nice to meet you! </h1>
<p class="paragraph myflexparagraph"> This is a paragraph </p>

I have no clue if this is good or bad but if this helps only one person somewhere that's still one more then naught!

score 2 · Answer 5 · answered Mar 02 '19 at 11:36

If you use Bootstrap, try to assign margin-bottom 0 to the paragraph and after assign the property align-items-center to container, for example, like this:

<div class="row align-items-center">
     <p class="col-sm-1 mb-0">
          ....
     </p>
</div>

Bootstrap by default assign a calculate margin bottom, so mb-0 disabled this.

I hope it helps

score 1 · Answer 6 · answered Jun 15 '12 at 15:09

you could use

    line-height:35px;

You really shouldnt set a height on paragraph as its not good for accessibility (what happens if the user increase text size etc)

Instead use a Div with a hight and the p inside it with the correct line-height:

    <div style="height:35px;"><p style="line-height:35px;">text</p></div>

score 1 · Answer 7 · answered Aug 31 '20 at 09:43

User vertical-align: middle; along with text-align: center property

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  border: 3px solid green;
  text-align: center;
}

.center p {
  display: inline-block;
  vertical-align: middle;
}
</style>
</head>
<body>

<h2>Centering</h2>
<p>In this example, we use the line-height property with a value that is equal to the height property to center the div element:</p>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>

score 0 · Answer 8 · answered May 10 '20 at 22:10

Alternative solution which scales for multi-line text:

Set vertical and horizontal padding to be (height - line-height) / 2

p.event_desc {
    font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 14px;
    padding: 10.5px 0;
    margin: 0px;
}

score 0 · Answer 9 · answered Jul 08 '20 at 21:26

0

Below styles will vertically center it for you.

p.event_desc {
 font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
 line-height: 14px;
 height: 35px;
 display: table-cell;
 vertical-align: middle;
 margin: 0px;
}

answered Jul 08 '20 at 21:26

hzak

719
9
18

score 0 · Answer 10 · answered Aug 31 '20 at 09:05

0

In my case margin auto works fine.

p {
    font: 22px/24px Ubuntu;
    margin:auto 0px;
}

answered Aug 31 '20 at 09:05

maka paka

21
1

Yea. Margin auto to top and bottom works fine – Mohan Krishna Sai May 10 '22 at 07:31

score 0 · Answer 11 · answered Jan 27 '22 at 13:45

Precisely, vertically align text in a paragraph.

HTML

<main>
    <p><span>TEXT to be centered in P tag</span></p>
</main>

CSS

main {
        height: 400px;
        position: relative;
}

main>p {
        min-height: 128px;
        line-height: 128px;

        font-size: 48px;

        position: relative;

        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
}

main>p>span {
        position: absolute;

        left: 0;
        right: 0;
        top: 64px;
        transform: translateY(-68px);
        -webkit-transform: translateY(-68px);
        -moz-transform: translateY(-68px);
        -ms-transform: translateY(-68px);

        text-align: center;
}

score 0 · Answer 12 · answered Aug 27 '22 at 12:40

0

Try this:

<div class="parent">
    <p class="child"> This is a paragraph </p>
</div>

parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

p {
    text-align: center;
}

Successful.

answered Aug 27 '22 at 12:40

reza_khalafi

6,230
7
56
82

How do I vertically align text in a paragraph?

12 Answers12

Linked

Related