Centering Three Images

Posted on 2014-10-18
Last Modified: 2014-10-18
I have been playing with this for awhile now.  I am trying to center these three images with a space between each.  I tried one big div with each image inside a div.  Did not work.  Adding a div also interrupted the background fade as well.  How can I do this?  Thank you.  File attached.
Question by:DS928
  • 3
  • 2
LVL 58

Expert Comment

ID: 40389572
Where are they supposed to be
LVL 17

Expert Comment

ID: 40389594
Like already said.

Add this to these lines class="displayed"

   <img src="images/OMG.jpg" width="240"  height="199" class="displayed"/>
       <img src="images/OMG.jpg" width="240" height="199" class="displayed"/>
       <img src="images/OMG.jpg" width="240" height="199" class="displayed"/>

Open in new window

ad this right above </style>
IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }

Open in new window

There is a Vertical method


Author Comment

ID: 40389611
Right underneath the logo.  In a horizontal line.
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

LVL 58

Accepted Solution

Gary earned 500 total points
ID: 40389617
Place them in a div with an id or class e.g.

<div id="three_images" style="width: 740px;">
<img width="240" height="199" align="left" src="images/OMG.jpg">
<img width="240" height="199" align="middle" src="images/OMG.jpg">
<img width="240" height="199" align="right" src="images/OMG.jpg">

Open in new window

Add this css change the ID to whatever you use

#three_images img:not(:last-child) {
    margin-right: 10px;

#three_images {
    width: 740px;

Open in new window

Remove your logo css class

Author Closing Comment

ID: 40389620
Perfect.  Thank you Gary.
LVL 58

Expert Comment

ID: 40389623
Change #three_images to width:780px

Width of the three images plus the margin on the first two images.

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Adding bootstrap to only Content page and NOT master page 1 50
Customizing jQuery UI Accordion CSS 3 28
key press alert 2 32
Create an automated page index 9 53
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question