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

alignment, css, html, image

Solution

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.

Problem

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.

Original source