- Use the float CSS Property to Place the Text Next to an Image in HTML
- Use display: inline-block and vertical-align: top to Place the Text Next to an Image in HTML
The article explains the ways to place text beside images by using HTML and CSS.
Use the float CSS Property to Place the Text Next to an Image in HTML
We can use the float CSS property to define how an element can float. An element can float to the right or the left. Some other options are none which means the element will not float and, inherit which, will exhibit its parent’s behavior. We use the float property to specify the positioning and formatting of an element. We can also use the property to place a text next to an image.
We can easily achieve the following style by wrapping both image and text content with a div. The HTML should be structured as below.
Now that the HTML is structured, we can add our CSS as inline, internal, or external. For this example, we will be implementing the styles using inline CSS. First, set the float property to left for the div wrapping the image. Use the URL https://loremflickr.com/320/240 as the image source. Next, write any text of your choice and wrap it with another div.
Code Example:
Here, the property float: left is given to the wrapper of the image. The float: left property will place the image at the left, and another wrapper wrapping the text content will be placed just beside the image. In this way, we can use the CSS float property to place a text next to an image.
Use display: inline-block and vertical-align: top to Place the Text Next to an Image in HTML
We can use the display and vertical-align properties to place a text next to an image in HTML. The display defines how an element displays in HTML. We can set an element’s display property as inline, inline-block, block, etc. When we assign display to inline-block, it will make the element an inline element, but we still can set height and width properties to it. Thus, we will be able to place the text beside an image. The vertical-align property defines the vertical alignment of an element. When we use the value top, the element will be aligned to the top of the tallest element on the line.
Here, we can again structure our code as below.
For example, set the display property to inline-block and the vertical-align property to top for the image wrapper div. As for the wrapper, div of the text set the display property to inline-block.
Code Example:
Here, the property display: inline-block sets the property of the wrapper that is wrapping image an inline-block property. The inline-block option does not add a line break beside the element. Therefore, the elements will align next to one another. We again wrap the text wrapper with the display: inline-block property as well. Similar to the previous wrapper, it will place the text content right beside the image.