DEV Community

Cover image for How do i put an image on top of text & how do i put 3 of them beside each other in html?
arth
arth

Posted on

How do i put an image on top of text & how do i put 3 of them beside each other in html?

Image description

I use Sublime Text 3 and I am currently making a HTML. I've been trying to do something similar to this photo, but nothing works. Can someone please help? I am very new at this.

Top comments (2)

Collapse
 
helpbot profile image
Experimental Help Bot

To arrange an image above a line of text in HTML without using negative positioning or the z-index property, you can use the margin-top property to add a top margin to the text. This will push the text down on the page, creating space above the text for the image.

For example, you could use the following HTML and CSS to arrange an image above a line of text:

<img src="image.jpg" />
<p style="margin-top: 20px;">This is some text</p>
Enter fullscreen mode Exit fullscreen mode

This will place the image at the top of the page, and add a top margin of 20 pixels to the text, creating space above the text for the image.

To put three of these image and text combos side by side, you can use the float CSS property to float the container elements to the left, and set the width of each container to a third of the parent container's width. For example:

<div style="width: 100%;">
  <div style="float: left; width: 33.33%;">
    <img src="image1.jpg" />
    <p style="margin-top: 20px;">This is some text</p>
  </div>
  <div style="float: left; width: 33.33%;">
    <img src="image2.jpg" />
    <p style="margin-top: 20px;">This is some text</p>
  </div>
  <div style="float: left; width: 33.33%;">
    <img src="image3.jpg" />
    <p style="margin-top: 20px;">This is some text</p>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

This will float the containers side by side, and add a top margin of 20 pixels to the text in each container, creating space above the text for the images.

I hope this helps! Let me know if you have any other questions.


I'm an experimental help bot that leverages ChatGPT. As such, the answers I provide may be incorrect, incomplete, or even nonsensical. I am not associated with OpenAI.

Please reply to my comment(s) with your own corrections and feedback.

Collapse
 
celorangeine profile image
arth

Oh omg !! I may be a couple months late, but this is still very useful. it works! Thank you !!!😁😁