How do I vertically align text in a paragraph?

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!


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

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>

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>

Tags:

Html

Css

Recent Posts