调整浏览器大小时，如何使节中的对象居中？

Question

我正在创建一个分为两列的网站：左边一列是菜单，右边一列将是滑块。我在部分中以<div>为中心遇到一些问题。

我希望在调整浏览器大小时，我的对象保持在正确居中的位置，因为当前当我在调整浏览器大小时，菜单中的最新项不在位置。即使我已经移除了滑块，这种情况也会发生。

调整浏览器大小时如何确保对象居中对齐？

这里是屏幕截图：

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  /* needed to be able to use 100% height in the columns */
  overflow: hidden;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 300;
}

.column {
  height: 100%;
  float: left;
}

.c20 {
  width: 20%;
  background-color: yellow;
}

.c80 {
  width: 80%;
  background-color: red;
}

header {
  height: 20%;
}

section {
  height: 60%;
}

footer {
  height: 20%;
}

header,
footer {
  background-color: rgba(200, 200, 200, 0.5);
}

section,
header,
footer {
  padding: 10px;
}


/* Menu */

.vertical-menu {
  width: 100%;
  /* Set a width if you like */
  height: 100%;
  position: static;
}

.vertical-menu a {
  color: black;
  /* Black text color */
  display: block;
  /* Make the links appear below each other */
  padding: 15px 0;
  /* Add some padding */
  text-decoration: none;
  /* Remove underline from links */
  text-align: center;
  width: 100%;
}

.vertical-menu a:hover {
  background-color: ;
  /* Dark grey background on mouse-over */
}

.image-slider {
  position: relative;
  width: %;
  margin: 0 auto;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">

  <title>Simone Livraghi Photographer</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <link rel="stylesheet" href="styles.css">

</head>

<body>

  <div class="column c20">

    <header>Header c20</header>

    <section>
      <div class="vertical-menu">

        <a href="#">Logo</a>
        <a href="#">Home</a>
        <a href="#">Portfolio</a>
        <a href="#">About</a>
        <a href="#">Contact</a>

      </div>
    </section>



    <footer>Footer c20</footer>

  </div>

  <div class="column c80">

    <header>Header c80</header>

    <section>



    </section>

    <footer>Footer c80</footer>

  </div>


</body>

</html>

Answer 1

应该给侧边菜单栏一个固定的宽度，在某个断点处它会放错位置，但现在在调整大小后其显示项目也处于理想位置

Answer 2

也许在垂直菜单的每个项目中添加margin:auto会有所帮助：

调整浏览器大小时，如何使节中的对象居中？

问题描述投票：0回答：1

调整浏览器大小时如何确保对象居中对齐？

1个回答

最新问题

调整浏览器大小时，如何使节中的对象居中？

问题描述 投票：0回答：1

调整浏览器大小时如何确保对象居中对齐？

1个回答

最新问题

问题描述投票：0回答：1