OstlerDev OstlerDev - 5 months ago 22
HTML Question

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

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

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.