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>

Answer 1

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>

Answer 2

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; } 

Answer 3

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>

Answer 4

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!