Centering Three Images

Posted on 2014-10-18
Medium Priority
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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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.
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

LVL 58

Accepted Solution

Gary earned 2000 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

765 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