Question

为什么我只能在课程margin-top:50%和margin:bottom:50%上使用.logo和.right来垂直对齐

根据我所读到的内容margin:bottom:50%和margin-top:50%应自动将right和.logo垂直居中放置在其容器header中，而是来到页面的一些随机中间位置。

这是我的主要问题（窗口调整大小的这种奇怪的边缘行为）
- 如果我使用margin-top:x%并将它们放在header的垂直中间位置，那么当我将窗口调整为较小时，LOGO会从header的中间位置移动到顶部。

html {
  background-color: white
}
body {
  width: 88.5%;
  height: 1200px;
  margin: 0 auto;
  border: 2px solid black;
  background-color: #161e2c;
}
.top-box {
  margin: 0 auto;
  width: 99.5%;
  height: 153px;
  background-color: #314e59;
  border: 1px solid rgb(211, 41, 97);
  box-shadow: 0px 10px 7.4px 2.6px rgba(0, 0, 0, 0.74);
}
a {
  display: inline-block;
  margin: 23px 0 0 5px;
  padding: 5px 5px;
  max-width: 400px;
  color: white;
  text-decoration: none;
  font-size: 500%;
  background-color: pink;
  border: 2px solid black;
}
.right {
  margin-top: 13px;
  display: inline-block;
  width: 600px;
  background-color: pink;
  border: 2px solid black;
  float: right;
  text-align: center;
  color: white
}
ul {
  display: inline-block;
  list-style-type: none;
  font-size: 35px;
  width: 100%;
  padding-left: 0;
}
li {
  display: inline-block;
  padding: 7px;
}

<body>
  <header class="top-box">
    <a href="#" class="logo">Konoha</a>
    <div class="right">
      <ul>
        <li>Text</li>
        <li>Text</li>
        <li>Text</li>
        <li>Text</li>
        <li>Text</li>
      </ul>
    </div>
  </header>
</body>

现在我正在使用margin: (x) px这就是为什么他们保持在中间，即使我让窗户变小了

Answer 1

你混合了很多东西，让我们使用flexbox

来简单化

在display: flex; justify-content: space-between; align-items: center;

中使用：.top-box

并删除一些属性。

＆＃13;

*,
*::before,
*::after {
  box-sizing: border-box
}
html {
  background-color: white
}
body {
  width: 88.5%;
  height: 1200px;
  margin: 0 auto;
  border: 2px solid black;
  background-color: #161e2c;
}
.top-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 153px;
  background-color: #314e59;
  border: 1px solid rgb(211, 41, 97);
  box-shadow: 0px 10px 7.4px 2.6px rgba(0, 0, 0, 0.74);
}
a {
  padding: 5px;
  max-width: 400px;
  color: white;
  text-decoration: none;
  font-size: 500%;
  background-color: pink;
  border: 2px solid black;
}
.right {
  max-width: 600px;
  background-color: pink;
  border: 2px solid black;
  text-align: center;
  color: white
}
ul {
  list-style-type: none;
  font-size: 35px;
  width: 100%;
  padding: 5px;
  margin: 0
}
li {
  display: inline-block;
}

＆＃13;

<body>
  <header class="top-box">
    <a href="#" class="logo">Konoha</a>
    <div class="right">
      <ul>
        <li>Text</li>
        <li>Text</li>
        <li>Text</li>
        <li>Text</li>
        <li>Text</li>
      </ul>
    </div>
  </header>
</body>

＆＃13;

Answer 2

如果你想在你应该使用的元素上创建一个边框，那么命令是border-style。

h2 { border-style: dashed; border-width: 3px; border-left-width: 10px; border-right-width: 10px; border-color: red; }

保证金财产未按预期运作

2 个答案: