Inline Images on a wordpress page

HTML & CSS
1

http://ontargettdesign.com/about/

Hi Guys,

May seem a simple question, but I have these three images on the about page on my wordpress site. I want to have the images alongside each other instead of ontop of each other. Could someone advise on how to do this please?

Thanks in advance

2

Check the code view of the page’s html to ensure that the code for the images is wrapped in a single

tag e.g.

<p><img src=/blah" /><img src=/blah" /><img src=/blah" /></p>

Delete out all of the height/width attributes and values and delete all of the style names that WP generates.

The last thing you need to check is that the total width of 3 images is smaller than the parent container width.

After the 3 images are inline, if you dont like how close thay site together, add a class name such as class=“aboutUsImgs”, then add a rule to your stylesheet, .aboutUsImgs { padding-right:10px;}

That will add 10px of padding to the right of each image.

4

Move the class “aligncenter” from the images to their <p> tag.

The following gives a general idea of the concept:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>template</title>
<!--




-->
    <style type="text/css">

p.aligncenter {
    text-align:center;
}

.aligncenter img {
    display:inline-block;
}
.aligncenter img + img {
    margin-left:30px;
}

    </style>
</head>
<body>

<p class="aligncenter"><img src="http://placehold.it/150x150" alt=""><img src="http://placehold.it/150x150" alt=""><img src="http://placehold.it/150x150" alt=""></p>

</body>
</html>

I did not try to determine which WordPress styles may need to be overridden.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.