10

I have an image and text next to each other in a div. I'm trying to align the text vertically aligned in the middle, but it stays on top. Please help!

http://jsfiddle.net/9KDva/

HTML:

<div class="title-block">
  <div class="img-holder"><img width="101" height="104" src="http://www.girlsguidetomanners.com/wp-content/uploads/2014/02/url-16-101x104.jpeg" class="attachment-homepoststhumbnail wp-post-image" alt="url-16" /></div>
  <div class="title">Get Your Nose Out of Your IPhone</div>
</div>

CSS:

.title-block {
width:272px;
height: 110px;
vertical-align:middle;
}

.img-holder {
float: left;
margin: 0 6px 0 0;
position: relative;
}

.img-holder img {
display: block;
}

.title {
display:block;
text-transform: uppercase;
margin: 8px 0 9px;
}
Jaeeun Lee
  • 3,056
  • 11
  • 40
  • 60
  • possible duplicate of [CSS vertical-align: middle not working](http://stackoverflow.com/questions/16629561/css-vertical-align-middle-not-working) – steveax Mar 01 '14 at 02:47
  • this link will help understand vertical aligment http://www.impressivewebs.com/difference-block-inline-css/ – ejaenv Feb 13 '16 at 07:09

3 Answers3

10

You can use table and table-cell: And move your class='title' inside img-holder

Fiddle

With padding left away from image - fiddle

.title-block {
    width:272px;
    height: 110px;    
}

.img-holder {    
    margin: 0 6px 0 0;
    position: relative;
    display: table;
}

img, .title{
    display:table-cell;
    vertical-align: middle;
}
.title {
    text-transform: uppercase;
    margin: 8px 0 9px;  
}
JunM
  • 7,040
  • 7
  • 37
  • 58
  • 3
    Since the question is how to align a block, changing display to table-cell, does not help anyone trying to vertically align an element with display block. Might as well use flex alignment if your willing to change display. – Logan Cundiff Jun 24 '22 at 15:28
1

I changed your div to span for vertical-align: middle to work.

See Fiddle: http://jsfiddle.net/9KDva/4/

CSS:

.vam {
    vertical-align: middle;
}
span.vam {
    display: inline-block;
}

HTML:

<div class="title-block">
   <span class="img-holder vam">
<img width="101" height="104" src="http://www.girlsguidetomanners.com/wp-content/uploads/2014/02/url-16-101x104.jpeg" class="attachment-homepoststhumbnail wp-post-image" alt="url-16" /></span>
    <span class="title vam">Get Your Nose Out of Your IPhone</span>

 </div>
jellyfication
  • 170
  • 2
  • 12
0

Using vertical-align: middle won't work on a div.

Something like this might work:

<table class="title-block" style="background-image:url('http://www.girlsguidetomanners.com/wp-content/uploads/2014/02/url-16-101x104.jpeg); background-size: cover; background-position: center center;">
  <tr>
     <td class="title" style="vertical-align: middle;">
         Get Your Nose Out of Your IPhone
     </td>
  </tr>
</table>
Suchan Lee
  • 607
  • 5
  • 5