Vertically aligning single line text within a minimum height div

Question

I have a certain class of div that contains an icon in the upper-left corner as the background image, and text in the remainder of the div. The div has a minimum height of 32px so that all of the icon is shown.

When there is multiple lines of text, the lines look fine as they stretch the div down longer than the minimum height, but when there is only one line, it is not vertically aligned with the centre of the icon.

JSFiddle here.

Is there any way to get the single line to vertically align, but not mess it up when there are multiple lines?

.test {
    background-color: #98c5ff;
    color: #093d80;
    width: 400px;
    min-height: 32px;
    background-image: url("http://google.com/favicon.ico");
    background-repeat: no-repeat;
    padding-left: 42px;
}

<div class="test"><p>Short message</p></div>
<hr />
<div class="test"><p>Rather long message that should hopefully wrap on to a second line at some point.</p></div>
<hr />
<div class="test"><p>Message<br />with<br />many<br />lines<br />.</p></div>

Answer 1

You can use display in your CSS like this:

.test {
    background-color: #999999;
    display: table; /* Add this in here. */
    width: 400px;
    min-height: 32px;
    background-image: url("http://google.com/favicon.ico");
    background-repeat: no-repeat;
    padding-left: 42px;
}

.test p {
    display: table-cell;
    vertical-align: middle;
}

Answer 2

display:flex is also an option for .test.

if .test holds a single p then margin:auto 0; should be enough:

http://jsfiddle.net/eXZnH/35/ EDIT: (fixed fiddle) http://jsfiddle.net/eXZnH/36/

.test {
  background-color: #98c5ff;
  color: #093d80;
  width: 400px;
  min-height: 32px;
  background-image: url("http://google.com/favicon.ico");
  background-repeat: no-repeat;
  padding-left: 42px;
  display: flex;/* added */
}
p {
  margin: auto 0;/* added */
}

<div class="test">
  <p>Short message</p>
</div>
<hr />
<div class="test">
  <p>Rather long message that should hopefully wrap on to a second line at some point.</p>
</div>
<hr />
<div class="test">
  <p>Message
    <br />with
    <br />many
    <br />lines
    <br />.</p>
</div>