3

I have seen the answer the answer to ''Vertical Align in a Div " and followed the Adam's answer. My problem is to how to have both image and text side by side and the text being at the middle of the image.

My JSFiddle

My tried code

CSS

.outerContainer {
    display: table;
    width: 100%; /* width of parent */
    height:200px;
    overflow: hidden;
    border:1px solid green;
}
.outerContainer .innerContainer {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin: 0 auto;
}

HTML

<div class="outerContainer">
          <div class="innerContainer">
            <div >
             <img src='http://icons.iconarchive.com/icons/danleech/simple/512/facebook-icon.png' height=50px width=50px>
                <p style='display:inline-block;font-size:10px;'>Some Text</p>

            </div>
          </div>
        </div>

My problem is to get that 'Some Text' side and at the middle of the image

**NOTE:**I know I shouldn't use inline-block here. But I don't know how to get it.

Community
  • 1
  • 1
Lonely
  • 613
  • 3
  • 6
  • 14

1 Answers1

5

The img is supposed to have the vertical align property.

<img src='http://icons.iconarchive.com/icons/danleech/simple/512/facebook-icon.png' height="50" width="50" style="vertical-align:middle;">
Lance
  • 4,736
  • 16
  • 53
  • 90
  • Not too sure. I've only ever really used the vertical-align property on img tags. Give me an example on jsfiddle of text not aligning in the center next to a header tag. – Lance Sep 04 '13 at 11:11
  • 1
    The reason that the text on the right hand side looks a bit off is because of the different font sizes. One is 20px and the other is 15px. Try setting the second paragraph tag to vertical-align:middle and it looks a little bit better. http://jsfiddle.net/6AQ4z/5/ – Lance Sep 04 '13 at 12:17