html - 将文本对齐到图像的右侧

Question

我想将所有 3 行文本对齐到图像的右侧。目前它在第二行换行。

我该怎么做？

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

将文本包裹在一个 div 中，并使图像 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.

垂直中间文本:

给图像和文本容器display:inline-block;

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

See DEMO here.