Question

我想将所有3行文字对齐到我的图片右侧。目前它包装在第二行。

我该怎么做？

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.

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>

此处fiddle

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

将文本对齐图像右侧

4 个答案: