Несколько строк текста рядом с изображением (CSS-HTML)

Я пытаюсь поставить две строки текста рядом с изображением, вроде как

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

Я смотрел по всей сети, но не смог понять, как это сделать, любая помощь будет очень желанной.

Ответы

Ответ 1

Нет такой вещи, как float: center; Вы можете выбрать либо left, right, либо none.

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

Если вы float: left; на изображении, он будет делать то, что вам нужно.

Если вы хотите, чтобы он был центрирован, вам придется обернуть изображение и текст в контейнере, исправить ширину контейнера и сделать margin: 0 auto; на нем, а затем продолжить показ вашего изображения - за исключением того, что оболочка будет ограничена оболочкой.

Ответ 2

Вот фрагмент с использованием svg, чтобы вы могли его протестировать в любом месте.

.img{
    float: left;
    margin-right:1rem;
}

<div>
  <svg class="img" width="50" height="50" >
    <rect width="50" height="50" style="fill:black;"/>
  </svg>
  <p>
    Line 1
    <br>
    Line 2
  </p>
</div>

Ответ 3

Я знаю, что этот пост старый, но оберните ваш элемент в div и примените vertical-align:top к этому div, и все готово.

Ответ 4

Проверьте это. Он хорошо определен css.

<!DOCTYPE html>
<html>
   <head>
      <title>Selectors</title>
      <style>
         .banner p {
             font-family: "Gentium Basic";
             font-size: 19px;
             text-align: center;
             color: #aaa;
             margin-top: -10;
             display: block;
         }
         img, span {
             float:left;
         }
         .banner img {
             float: center; 
             margin: 5px;
         }
         [class="ban1"]{
             font-size: 17px;
             position:relative;
             top:50px;
             left:11px;
         }
         [class="ban2"] {
             font-size: 17px;
             position: relative;
             left: -97px;
             top: 74px;
         }
      </style>
   </head>
   <body>
      <div class="banner">
         <div class="wrapper">
            <p><img src="span.png"><span class="ban1">Line one of text</span>
               <span class="ban2">Line 2 of text</span>
            </p>
         </div>
      </div>
   </body>
</html>