將文字對齊到圖像的右側

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>

演示在這里。

垂直中間文字：

給display:inline-block; 圖像和文本容器。

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

在這里查看演示。

Answer 2

float: left在圖片上的路要走。

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

或其他替代方法（以使文本居中）

http://jsfiddle.net/Lbbt1uy8/

重要的是要知道， vertical-align使用的是line-height而不是height來使某物垂直居中。

Answer 3

嘗試在文本上使用<p>元素而不是</br> ，並向圖像添加align屬性，如下所示：

<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>

在這里擺弄

Answer 4

您在語法上有很多錯誤，應該包裝每個元素並為其分配單獨的CSS代碼

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>

和CSS

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

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