WordPress Website Tutorials for Beginners

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

Your-url.jpg    

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

Standard
Code:

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

Add Border:
Code:

<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!

Code:

<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:

Code:

<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 62 times, 1 visits 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>