asked on

I want to center my image horizontally with CSS3

Hi There,

I would like to center my logo and have it centered on the top navigation bar at all times, even if you reduce window size. The website does it, but I can't get it absolutely centered

/* the company logo */
#navigationBarLogo
{
      display: block
      vertical-align: top;
      margin-left:auto;
margin-right:auto;
      margin-top:-75px;
      display: table;
      /*margin-right:20px;*/
}

Please help in finding out why. Also, I would like to have nothing 'overlapping' on top of the logo if the client reduces his browser window size.

MANY THANKS !
Adam

adam1h

ASKER

Ooops...the page can be viewed HERE

https://www.joe-cool.co.uk/3_0/Home.cfm

Edwin Hoffer

Use align:center; instead of /*margin-right:20px;*/

Thanks
Edwin

adam1h

ASKER

Hi Ewin,

thanks for your very quick reply on this

Tried and added align:center but my logo seems to be sitting on the left more than staying centered

:-(

Adam

SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Scott Fell

Since you are trying to make your site responsive, you can roll your own media queries for each scenario. I find tweaking this from scratch always sounds easy but as you dive in it is much more involved. I have used bootstrap http:Q_28406542.html#a39982826 and foundation.zurb.com as starting points for my responsive sites.

Take a look at the example link you can see it is very easy and quick to work with once you get over a very short learning curve.

SOLUTION

Edwin Hoffer

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Gary

Add to the anchor tag surrounding the image, though I don't see the purpose of centering the image when it covers other things.

    display: block;
    margin: auto;
    width: 190px;

Open in new window

ASKER CERTIFIED SOLUTION

sajayj2009

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial