html - 图像旁边的多行文本 (CSS-HTML)

Question

我想在图片旁边放两行文字，有点像这样

_________
|       | Line one of text
| image |
|       | Line two of text
---------

这是我目前的代码

<p style="color: #fff;"><img src="assets/image.png"><span style="">Line one of text</span>
    <br>
    <span class="ban2">Line 2 of text</span></p>

 .banner p {
  font-family: "Gentium Basic";
  font-size: 19px;
  text-align: center;
  color: #aaa;
  margin-top: -10;
  display: block;
 }
.banner img {
  float: center; 
    margin: 5px;
 }
 .banner span {
  padding-top: 50px;
  font-size: 17px;
  vertical-align:top;
 }
  .banner .ban2 span {
  padding-top: 50px;
  font-size: 17px;
  vertical-align:top;
 }

但目前它是这样做的:

_________
|       | Line one of text
| image |
|       | 
---------
Line two of text

我已经在网上找遍了，但一直无法弄清楚如何做到这一点，非常欢迎任何帮助。

Answer 1

没有 float: center; 您可以选择 left、right 或 none .

http://jsfiddle.net/vd7X8/1/

如果您在图像上float: left;，它会执行您想要的操作。

如果你想让它居中，那么你将不得不将图像和文本包裹在一个容器中，固定容器的宽度并在其上执行 margin: 0 auto;，然后继续让您的图片 float ——除非它会受到包装器的限制。