6

I'm trying to vertically align text with an image (or vice-versa?). Here's some code:

<div class="row">
  <div class="col-md-3">col-md-3
    <ul>
      <li><img src="http://placehold.it/60x60"><p>Text Text Text</p></li>
      <li><img src="http://placehold.it/60x60"><p>Text</p></li>
      <li><img src="http://placehold.it/60x60"><p>Text Text Text Text</p></li>
      <li><img src="http://placehold.it/60x60"><p>Text Text</p></li>
      <li><img src="http://placehold.it/60x60"><p>Text Text Text Text Text</p></li>
      <li><img src="http://placehold.it/60x60"><p>Text</p></li>
      <li><img src="http://placehold.it/60x60"><p>Text Text</p></li>
    </ul>
  {# 3 more columns like this #}
</div>

also CSS:

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

div ul li {
    display: table-row;
}    

img {
    float: left;
    margin: 0 0 10px 0;
    padding: 2px;
    vertical-align: middle;
}

also, might be important all images are the same fixed size, let's say 60x60 like in example and I can not use it as a background. How can I align it? Thanks.

Update: as were pointed out, I'm looking for text to be in the middle of the right edge of the picture, thanks.

Deja Vu
  • 721
  • 1
  • 8
  • 17
  • 'vertically align text with an image' doesn't describe what you want well enough, how do you want them aligned? – dezman Sep 17 '13 at 20:28
  • Why are you using

    tag inside li. This will move the text to the next line. and also float left property of image can be problematic here.

     – Irfan TahirKheli Sep 17 '13 at 20:41

6 Answers6

17

My solution works with one line of text as well as multiple lines.

Working Fiddle Tested on: IE10, IE9, IE8, Chrome, FF, Safari

HTML: same as you posted

I'm assuming you meant middle alignment. if not: use top | bottom instead of middle

CSS

*
{
    padding: 0;
    margin: 0;
}
ul
{
    list-style-type: none;
}

div ul li
{
    margin: 5px;
}    

img
{
    vertical-align: middle; /* | top | bottom */
}
div ul li p
{
    display: inline-block;
    vertical-align: middle; /* | top | bottom */
}
avrahamcool
  • 13,888
  • 5
  • 47
  • 58
  • @JonP use one paragraph, and `
    ` tags to break it to lines, and it will work. (as showed in the fiddle)     – avrahamcool Sep 18 '13 at 00:01
  • `
    ` are not semanticaly the same as `

    `. Furthur more What if the description is pulled from a database containing more than one parragraph. Also see: http://stackoverflow.com/questions/1726073/is-it-sometimes-bad-to-use-br

     – Jon P Sep 18 '13 at 00:16
  • it's really not a problem. the only thing that is needed for this solution to work, is to enclose all the text (whatever the form) within an `inline-block` element (I used a `p` with `disply: inline-block`), that will be aligned with the image. the content can be in different `p` tags, or whatever.. as long as all of it is enclosed inside a `inline-block` container. – avrahamcool Sep 18 '13 at 00:22
  • Worked for me, awesome – jelly46 Nov 28 '16 at 22:59
1

Just remove the <p> tag and the float:left from img and you got it.

Demo at http://jsfiddle.net/BA2Lc/

enapupe
  • 15,691
  • 3
  • 29
  • 45
1

I am not a big fan of using those table display options, had some bad cross-browser experiences with them.

Seems to me you could use line-height here. Something like this:

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

div ul li {
    line-height: 60px;
}    

img {
    float: left;
    margin: 0 0 10px 0;
    padding: 2px;
}

and a fiddle: http://jsfiddle.net/qjSpj/1/

Pevara
  • 14,242
  • 1
  • 34
  • 47
0

You can modify the <p> style from the default display to inline:

p {display: inline}
Vlad
  • 978
  • 6
  • 13
0

You can use the vertical-align: top; declaration on the li element. But you will need to use a clearfix since you're floating the image.

Mohamad
  • 34,731
  • 32
  • 140
  • 219
0

I just added vertical-align:middle/top/bottom; to the images and worked.

Juan from GT
  • 1