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