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

html css image alignment

44,963

Solution 1

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

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.

Solution 2

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

Solution 3

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>

Solution 4

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.

Solution 5

Check it. It is well defined css.

<!DOCTYPE html>
<html>
   <head>
      <title>Selectors</title>
      <style>
         .banner p {
             font-family: "Gentium Basic";
             font-size: 19px;
             text-align: center;
             color: #aaa;
             margin-top: -10;
             display: block;
         }
         img, span {
             float:left;
         }
         .banner img {
             float: center; 
             margin: 5px;
         }
         [class="ban1"]{
             font-size: 17px;
             position:relative;
             top:50px;
             left:11px;
         }
         [class="ban2"] {
             font-size: 17px;
             position: relative;
             left: -97px;
             top: 74px;
         }
      </style>
   </head>
   <body>
      <div class="banner">
         <div class="wrapper">
            <p><img src="span.png"><span class="ban1">Line one of text</span>
               <span class="ban2">Line 2 of text</span>
            </p>
         </div>
      </div>
   </body>
</html>

View more solutions

44,963

Author by

OstlerDev

Updated on June 23, 2020

Comments

OstlerDev almost 4 years

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.

OstlerDev over 10 years

I am trying to center the image and text in a banner, if I make it float to the left then it goes all the way to the left without allowing me to make it centered.
Ming over 10 years

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. See this: jsfiddle.net/vd7X8/1 (also updated answer.)
Wh1T3h4Ck5 over 9 years

Yep, with some workaround that could be usable solution. Btw, post age doesn't matter, Q&A are here to provide help to other people too (facing same or similar problems).
Miguel Stevens about 9 years

This says float: center; that's not possible in css