1

http://codepen.io/maxwbailey/pen/nxaFr

I'm trying to get the text to center vertically. This is only important when there is white space (I.E. when the auto height would be less than min-height). How can I accomplish this? I've seen this question asked several times, but none of the answers I've yet found apply to my application.

Thanks! ^_^

Drexl
  • 69
  • 2
  • 2
  • 8

1 Answers1

0

Given the fact that you've set a min-height of 75px, you can just add padding of half that to the top and bottom of the text, like so:

.warning {
  display:block;
  font-family: sans-serif;
  font-weight: bold;
  padding: 32.5px 0;
  /*vertical-align: middle;*/
}

.warning needs to be display: block; to accept padding, but those are the only changes that are necessary to accomplish your objective, I think. Check it out: http://codepen.io/maxwbailey/pen/qcvre

EDIT

If you want to keep the text centered until the container gets small enough that it fills the min-height, you need to use display: table-cell, like so:

.warning {
  display:table-cell;
  font-family: sans-serif;
  font-weight: bold;
  vertical-align: middle;
  height: 75px;
}

http://codepen.io/maxwbailey/pen/dwfar

Jake
  • 4,014
  • 8
  • 36
  • 54
  • Nope, I already thought of this. The problem here is that the padding is kept regardless of how much text is inside of the object. With the example text provided that is fine. However, once the amount of text would cause the object to reach a height of 75px or more anyway then the padding isn't serving as a work-around anymore it's serving as, well... ugly padding. :P – Drexl Aug 16 '13 at 18:28
  • Ahh, I see. Updated my answer ^^ – Jake Aug 16 '13 at 18:33
  • Also, for future reference, this is not a CSS3 issue, it's just a CSS issue. You'll have more luck if you tag all CSS questions with the CSS tag, as it has many more followers :) – Jake Aug 16 '13 at 18:35
  • Awesome, tyvm for the help! ^_^ – Drexl Aug 16 '13 at 18:46