Comment puis-je centrer mon image d'en-tête?

Question

Je pense que ceci est sans importance, mais pour mémoire, je construis un site Web Joomla 3.4.3 avec mon propre modèle Bootstrap 3.

L'image d'en-tête banner.svg sur mon site web devrait être au centre. Donc ce que j'ai fait était: donner à l'image ce CSS:

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

Mais quoi que je fasse, l'image restera à gauche, à moins que je ne lui laisse une marge fixe:

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

mais je ne veux pas le faire pour des raisons évidentes: mise à l'échelle pour la réactivité.

L'image d'en-tête 'se rétrécit' au défilement (jQuery), mais je ne vois aucune connexion là-bas.

Answer 1

Vous devez d’abord définir le conteneur d’emballage à 100% avec:

.navbar-header {
    width: 100%;
}

Ensuite, pour l'image, vous devez en faire un élément de bloc et définir correctement les marges, comme suit:

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