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

我试图将2行文字放在图像旁边,就像这样

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

我已经浏览了整个网络,但还没有弄清楚如何做到这一点,任何帮助将是非常欢迎的.

解决方法

没有这样的东西,如float：center;您可以选择左,右或无.

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

如果你漂浮：左;在图像上,它会做你以后的事情.

如果你想要它居中,那么你将不得不将图像和文本包装在一个容器中,修复容器的宽度并做边距：0 auto;在它上面,然后继续让你的图像浮动 – 除了它将被包装器约束.