0

I want the text in front of the image to be in the middle of it!

My problem is the vertical align middle is not working...

what is wrong?

<div class="comments">
<div class="pull-left lh-fix">
<img class=foto src="/$foto" class="imgborder">
</div>

<div class="comment-text pull-left">
<span class="pull-left color strong"><a href="/anna">anna</a>:</span> dododod
</div>
</div>

.pull-left { float: left; }
.lh-fix { line-height: 0 !important; }

.comments {
  position:relative;
  display:block;
  overflow:auto;
  padding-left:15px;
  padding-top:8px;
  padding-bottom:8px;
  border:1px solid #000;
}


.comment-text {
  margin-left: 8px;
  color: #333;
  vertical-align:middle; //not working?
  line-height:normal;
  width: 85%;
  text-align:left;
}

.foto{
  width:50px;
  height:50px;
  float:left;
}

https://jsfiddle.net/a0bhv4n1/

RGS
  • 4,062
  • 4
  • 31
  • 67
  • 1
    The image links don't work for me in the jfiddle, but I would take whatever holds the image and have it as `display:inline-block; position:relative;` and the text you want in front of the image as `position:absolute;` and see what that does for you. – JoeL Mar 15 '16 at 20:50
  • 1
    Just to add onto that, vertical-align only applies to inline and table-cell elements and a div is not inline by default (it is a block element by default). So if what I suggested doesn't exactly work in terms of position relative for one and position absolute for the other, adding display:inline-block; is imperative for vertical align to do anything. – JoeL Mar 15 '16 at 20:54
  • 1
    This has been asked & answered before: http://stackoverflow.com/q/4753678/407456 – elboletaire Mar 15 '16 at 21:00
  • 1
    updated fiddle: https://jsfiddle.net/a0bhv4n1/14/ – dlane Mar 15 '16 at 21:02

1 Answers1

2

Vertical-align works on inline elements. You are applying it to the class .comment-text which is for a div element. A div is a block style element which of course means that it will take up the entire space that it is allowed to, thus you cannot center something that already takes up the whole space. Inline elements only take up the space they need to based on the content in them and you can simply add display:inline-block to .comment-text to allow vertical-align:middle to work. More information can be found at MDN's article on vertical-align

JoeL
  • 710
  • 4
  • 18