How can I center my header image?

Question

I think this is immaterial, but just for the record: I'm building a Joomla 3.4.3 website with my own Bootstrap 3 template.

The header image banner.svg on my website should be in the center. So what I did was: give the image this CSS:

header img {
   margin: 10px auto 0 auto;
}

But, whatever I do, the image will stay on the left, unless I give it a fixed margin:

header img {
    margin: 10px 90px 0 90px;
}

but I don't want to do that for obivious reasons: scaling for responsiveness.

The header image 'shrinks' on scroll (jQuery), but I don't see any connection there.

Answer 1

You first need to set the wrapper container to 100% with:

.navbar-header {
    width: 100%;
}

Then, for the image, you need to make it a block element and set the margins correctly, like so:

header.large img {
    height: auto;
    margin: 10px auto;
    max-width: 100%;
    width: 900px;
    display: block
}