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