Comment centrer tout sur une page Web html sans être affecté par le zoom?

Question

Je ne suis pas si expert en HTML et en CSS. J'ai fait de mon mieux pour créer une page Web. Mais en zoomant, il semble cassé. Seul le logo et le sélecteur de langue sont cassés. Je ne sais pas comment résoudre ce problème. Quelqu'un peut-il me suggérer comment résoudre ce problème, s'il vous plaît? Ceci est ma page Web: corailhelico.com

Answer 1

Dans votre cas, vous avez un en-tête avec un logo et un sélecteur de langue.

J'ai utilisé un div en-tête avec logo et div with flex de langue. Ps: n'utilisez pas de marge avec px comme "450px" pour l'élément align, ce n'est pas responsive at all.

Guide Flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

html, body { 
 
    min-height:100%; 
 
    height:100%; 
 
} 
 

 
body { 
 
    display:flex; 
 
    flex-direction:column; 
 
    margin:0; 
 
} 
 

 
.header { 
 
    height:80px; 
 
    background:#f5f5f5; 
 
    align-items:center; 
 
    display:flex; 
 
    padding:0 10px; 
 
} 
 

 
.header .logo { 
 
    display:flex; 
 
    margin:auto; 
 
} 
 

 
.header img { 
 
    width:180px; 
 
    height:50px; 
 
} 
 

 
.header .language { 
 
    margin:0 0 auto 15px; 
 
}

<div class="header"> 
 
    <div class="logo"> 
 
    <div class="image"> 
 
     <img src="http://www.corailhelico.com/images/corail-logo.jpg"> 
 
    </div> 
 
    <div class="language">Language</div> 
 
    </div> 
 
</div>