Align text to right of Image

Question

I'd like to align all 3 lines of text to the right of my image. Currently it wraps on the 2nd line.

How do I do this?

http://jsfiddle.net/bhu4p04r/

CSS:

img {
    min-width:75px;
    height:90px;
    vertical-align:middle;
    margin-right:30px
}

HTML:

<div class="medium-12 columns"><img src="http://placekitten.com/g/75/90" />1<br />2<br />3</div>

Answer 1

Wrap your text in a div, and make image float:left .

<div class="medium-12 columns">
    <img src="http://placekitten.com/g/75/90" class="left" />
    <div class="right">1
        <br />2
        <br />3</div>
</div>

DEMO here.

Vertically middle text:

Give display:inline-block; to image and the text container.

img, .text {
    display:inline-block;
    vertical-align:middle
}

See DEMO here.

Answer 2

float: left on your image is the way to go.

http://jsfiddle.net/bhu4p04r/2/

Or another alternative (to keep the text centered)

http://jsfiddle.net/Lbbt1uy8/

What is important to know is that vertical-align uses line-height not height to center something vertically.

Answer 3

Try to use <p> elements instead of </br> on your text and add align attribute to your image like this:

<div class="medium-12 columns"><img src="http://placekitten.com/g/75/90" align="left"/><p>1</p><p>2</p><p>3</p></div>

Here fiddle

Answer 4

you had lots errors on the syntax and you should wrap each element and assign them with separate CSS codes

HTML:

<div class="medium-12 columns">
<img src="http://placekitten.com/g/75/90"></img>
</div>

<div id="txt">
1<br>2<br>3<br>
</div>

and CSS

.medium-12 {
    min-width:75px;
    height:90px;
    margin-right:30px;
    float: left;
    display: block;
}

#txt {
    float: left;
    display: block;
    margin-top: 0;
}