We usually insert pictures to the website and sometimes we need to put text beside a picture. For instance, if you put an image of a user profile, you need to place his/her name below the picture. Hence, with this post, we will introduce to you different methods to put text beside a picture in HTML. Scroll down for more details!

1. Put Text Beside a Picture in HTML by Using CSS float

The property CSS float can be used for defining the floating way of an element. Accordingly, an element can move to the left or right via floating. Some alternatives are none which refers that there is no floating performed by the element. On the other hand, it will behave like its parent. Moreover, we can use this property for specifying the element position and format. Or as our initial purpose, we use CSS float to put text beside a picture in HTML.

You can use div to contain both text content and image. Also, the structure of HTML should follow the coding snippet below.

<div>
    <div>
       <img src="url" />
    </div>
    <div>
        Text content goes here
    </div>
</div>

Now we already structured HTML, then CSS can be added inline, internally, or externally. For instance, we will conduct some styles with inline CSS. Firstly, place the property float to the left so the div can wrap the picture. Then, use this URL as the picture source: https://loremflickr.com/320/240. After, type any text as your option and use another div to wrap it.

<div>
    <div style="float: left">
       <img src="https://loremflickr.com/320/240" />
    </div>
    <div>
        Text content goes here
    </div>
</div>

You can see that the float: left property is provided to the image wrapper. The image will be placed by this property on the left, and the text will be wrapped beside that image by the alternative wrapper. Through this, CSS float can be used to put text beside a picture in HTML.

2. Put Text Beside a Picture in HTML by Using display: inline-block and vertical-align: top

The properties display and vertical-align can be used to put text beside a picture in HTML. The way an element presents in HTML is defined by the display. The display property of an element can be set as a block, inline-block, block, etc. When the inline-block is assigned to display, it will convert the element into an inline element, but the properties of width and height can still be set to it. Hence, the text can be placed beside a picture. When a value top is used, we can align the element above the tallest one of the line.

<div>
     <img src="" alt="img"/>
</div>
<div>
     <p> Text Here, </p>
</div>

For instance, the display feature is set to the inline-block and the property vertical-align is set to top for div which is an image wrapper. With the wrapper, the display feature is set to inline-block by the text div.

<div style="display:inline-block;vertical-align:top;">
     <img src="https://loremflickr.com/320/240" alt="img"/>
</div>
<div style="display:inline-block;">
     <p> Here goes the text content.</p>
</div>

Here, the wrapper property which is wrapping picture of an inline-block will be set by display: inline-block. Inline-block will not insert any line break next to the element. Hence, the element will be placed beside together. Again, display: inline-block is used for wrapping the wrapper of text. Like the foregoing wrapper, the text will be placed beside the picture.

Conclusion

This blog has provided you with 2 methods to put text beside a picture in HTML. Just follow the coding examples below so we can get the result you want. If you expect to learn more with IT tutorials, visit our website often for other useful sharings!