CODEWITHSUNDEEP
htmlwordpressimage
Lego
Lego

Reputation: 117

How to put images next to paragraphs in the middle, html only

I am working on WordPress on a webpage. I have some paragraphs in the middle on the webpage and a menu on top of it. So when you click on it you will go to that paragraph. (I still have to do that though)

But my question is how can you put an image next to the paragraphs without the paragraphs losing their position?

I tried different methods with float and such, but I think went wrong somewhere. I am not very good with HTML and CSS and I'm still learning, but I really like it :)

Here is a preview: https: //plnkr.co/edit/wUOxCgCTLRfkvnJLVKLa?p=previeW

The images don't have to be exactly the same height of the paragraph.

I hope I made it clear!!

Upvotes: 1

Views: 273

Answers (3)

Lego
Lego

Reputation: 117

Thank you for your answers all. The grid system sounds like a good solution, don't know exactly how hard it is.

I tried your code vijayscode, I see what you mean and it works. Only when I try to make the paragraphs in the middle of the page, the image will go on top of the paragraph instead of next to it. It stays next to it with a margin-left 20%. but when I do it more than 20 %, the image will go above the paragraph :(

Upvotes: 1

Kristofer Soler
Kristofer Soler

Reputation: 13

There are so many ways, you can use:

<html>
<style>

#img {
vertical-align: middle
}

.div1 {
display: inline-block
}

</style>
</html>

And for better control of space, use the grid system. Here you can learn how to use it: https://www.w3schools.com/Css/css_rwd_grid.asp

Have a nice day!

Upvotes: 1

vijayscode
vijayscode

Reputation: 2015

There are many ways to align divs and image side by side. The simplest way is to set display:inline-blockproperty for container divs for image and text.

https://jsfiddle.net/a7b3ep7a/

Hope it will help ;)

Upvotes: 1

Related Questions