Geek asks and answers

Vertical alignment of the text of one line within the minimum height of the div

I have a specific class divthat contains an icon in the upper left corner as a background image and text in the remainder div. divhas a minimum height of 32px, so all icons are displayed.

When there are several lines of text, the lines look great because they stretch the length divlonger than the minimum height, but when there is only one line, it does not align vertically with the center of the icon.

JSFiddle here .

Is there a way to get a single line for vertical alignment, but not ruin it if 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>
Run codeHide result
+5
source share
7

display CSS :

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

display:flex .test.

.test p, margin:auto 0; :

http://jsfiddle.net/eXZnH/35/ EDIT: ( ) 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>
Hide result
+2

position:absolute;

:

:
HTML:

<div class="container">
<div class="test"><p class="fix">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>
</div>

CSS

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

.fix{
  position:absolute;
  bottom:390px;
}

bottom:390px, div container, .

+1

, sudo- .test:after , background-position, :

.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;
   
}
.test:after{
content:"";
display:inline-block;
vertical-align:middle;
height:100%;
  
}
.test p{
  display:inline-block;
  vertical-align:middle;
  
}
<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>
Hide result

+1

, : Padding top , .

.test p:first-child{padding-top:8px}

, - div, "p", div.

.test {line-height:32px}

http://jsfiddle.net/eXZnH/34/

+1

, :: before CSS

.test {
  position: relative;
  padding-left: 32px;
  background-color: #DDD;
}

.test::before {
  content: url(http://google.com/favicon.ico);
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -16px; /* image height divided by 2 */
}


.test {
  position: relative;
  padding-left: 32px;
  background-color: #DDD;
}

.test::before {
  content: url(http://google.com/favicon.ico);
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -16px;
}
<div class="test">
<p>
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
</p>
</div>

<div class="test">
<p>bla bla bla bla</p>
</div>
Hide result
+1

, hr- div, . , .test

.test {
   // another styles..
   width: 130px; //small width for test
   display: inline-block;
   vertical-align: middle;
}
-1

More articles:


All Articles