如何在不受缩放影响的情况下将所有内容居中?

Question

我对HTML和CSS不是那么专业。我已经尽力创建一个网页。但是在缩放时，它似乎坏了。只有徽标和语言切换器损坏。不知道如何解决这个问题。任何人都可以建议我如何解决此问题吗？ 这是我的网页链接：corailhelico.com

Answer 1

在您的情况下，您有一个带有徽标和语言切换器的标题。

我使用了带有徽标和语言divwith flex的标题div

。Ps：不要像对齐元素那样使用带有 px 的边距"450px"，这不是responsive at all。

柔性导轨：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>