Multiple lines of text next to image (CSS-HTML)

Question

I am trying to put 2 lines of text next to an image, sort of like this

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

This is the code that I have so far

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

But currently it does this:

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

I have looked all over the web but have not been able to figure out how to do this, any help would be very welcome.

Answer 1

There's no such thing as float: center; You can choose either left, right, or none.

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

If you float: left; on the image it will do what you're after.

If you want it centered, then you're going to have to wrap the image and the text in a container, fix the width of the container and do margin: 0 auto; on it, then continue to have your image floated--except it will be constrained by the wrapper.

Answer 2

Here is a snippet using a svg so you can test it anywhere.

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