Align Images Side By Side, bordered, round, spaced HTML

Don’t you hate it when you are adding images to your website and they are jumping up and down? When you switch to the text editor, you can add special codes to prevent the picture jump.

Align images side by side


How to find your picture URL:

Step 1:

Add media

Step 2:

Upload picture file

Step 3:

Copy the URL from the attachment Details (see picture)

Step 4:

Paste this URL at the place where I typed


I will show you here the HTML code how to align images side by side. On the YouTube video, you can see which codes I provide to you.


At my home page I have used this code to align all buttons.

So here are the codes to align images side by side


<img src=”Your-url.jpg” alt=”your-description” width=”300″ height=”200″ class=”alignnone” />

Add Border:

<img style="border: 10px outset orange;" src="Your-url.jpg" alt="your-desciption" width="300" height="200" />    

Border options colors are adjustable:

outset orange;outset silver;outset blue;
solid black;solid yellow;
2px dashed DarkSlateBlue;5px dashed red;
5px double red;5px double green;
5px groove silver;10 px groove black;


Round picture:

Make the picture square first otherwise, it will deform!


<a style=”display: inline;”><img style=”width: 300px; height: 300px; border-radius: 200px;” title=”Your-title” src=”Your-url.jpg” alt=”Your description” /></a>

Spaced pictures:

Code non-spaced:

<img class=”left alignleft” src=”Your-url.jpg” alt=”Your description” width=”200″ height=”200″ />

Code spaced right aligned:

<img class=”right alignright” src=”Your-url.jpg” alt=”Your description” width=”200″ height=”200″hspace=”40px;” vspace=”40px;”/>


Code spaced left aligned:

<img class=”left alignleft” src=”Your-url.jpg” alt=”your description” width=”200″ height=”200″hspace=”40px;” vspace=”40px;”/>


Align pictures:Code:

<img src=”Your-url.jpg” alt=”Your-description” width=”276px” /> <img src=”Your-url.jpg” alt=”Your-description” width=”276px” />


Space align pictures:


<img class=” alignnone” src=”Your-url.jpg” alt=”Your-description” width=”276px” hspace=”40px;” vspace=”40px” /> <img class=” alignnone” src=”Your-url.jpg” alt=”Your description” width=”276px” hspace=”40px;” vspace=”40px;” />


Red Code;)

Be sure, when you have copied the code, your website editor has paste it plain. so when it’s not working, check up every “= and /

You can also use the gallery option to add pictures on one line, but to make that fit correctly, you have to make the pictures exactly the same size.

More tutorials with pictures are:

align images side by side
visit my profile page

affiliate disclosure

(Visited 97 times, 1 visits today)

Hey, nice to meet you. I am Loes and I love to work, create and make money on the internet. My vision for the future is promising because the activities and sales go to triple over the next few years. You can take advantage of it too. Step into the world of affiliate marketing today, and work towards financial freedom for you and for your family. If you would like to learn how to build your own Wordpress website, click here to open your free account today!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>