Question

我在HTML和CSS方面不是那么擅长。我已尽力创建网页。但是在放大时它似乎已经破碎了。只有徽标和语言切换器被破坏。不知道如何解决这个问题。有人可以建议我如何解决这个问题吗？这是我的网页链接：corailhelico.com

Answer 1

在您的情况下，您的标题包含徽标和语言切换器。

我使用了带徽标和语言div with flex的标题div。

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

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>

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

1 个答案: