Multiple lines of text next to image (CSS-HTML)
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.
I know this post is old but wrap your element in a div and apply the vertical-align:top to this div and you're done.
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>Here is my demo which have using float and overflow with some explain
.div1 {
border: 3px solid #0f0;
overflow:auto; // without overflow here, if the "Line 1" and "Line 2" is short then "Next elements" will display below "Line 2" and the image will cover the "Next elements"
}
.img {
float: left;
width:100px;
height:100px;
background: #000
}
.div2 {
float: left; // without float here, if "Line 1" and "Line 2" is long -> text will display both at right and bottom the image
} <div class="div1">
<img class="img"/>
<div class="div2">
<p> Line 1 </p>
<p> Line 2 </p>
</div>
</div>
<p>Next elements</p>Hope it help
