test

Question

您好，我想尝试将此标题放在中间。如图所示，它并没有到达中心，这确实让我很烦。问题的屏幕截图：https://i.imgur.com/tJhbKS1.jpg

如果无论如何您也可以做得更好，那就太好了。我的目标是最终使中心框向下延伸100％的屏幕

我在这篇文章中的主要重点是使中心正文框中的文本基本上以标题

test

居中，然后

test

位于中间一点，所以当我写它时将位于中心，当它到达框的末尾时，它将换行/。

我也想要它，因此盒子固定在它的位置，并且永远不会移动。

* /*Main Navbar (at top) */ .navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: darkgrey;
  border-bottom: 0.05px solid black;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

a:hover:not(.active) {
  background-color: #a0a0a0;
  border-bottom: 0.05px solid black;
  border: 0.05px solid black;
}

/*The body in the center of website */
.body-container {
  height: 100%;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.menu {
  padding: 20px;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  background-color: darkgrey;
  text-decoration-color: black;
}

.body-container .menu .title {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-left: 50%;
 
}
.body-container .body-text {

  text-align: center;
  margin-top:10%;
  

}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./css/header.css">
    <link rel="stylesheet" type="text/css" href="./css/site.css">
  </head>

<body>
  <ul class="navbar">
    <li><a href="#home">Home</a></li>
    <li><a href="#news">About</a></li>
    <li><a href="#contact">Contact</a></li>
    <li style="float: right;  "><a href="#about">Login</a></li>
  </ul>

  <div class="body-container">
    <div class="menu">
      <div class="title">
        <h1>test</h1>
      </div>
      <div class="body-text">
        <p>test </p>
      </div>
    </div>
  </div>
</body>
</html>

Answer 1

删除padding-left:50%;中的.body-container .menu .title，以使标题居中。此外，您使用了display:flex，这将导致子行没有居中。

查看此Codepen。 https://codepen.io/dmnktoe/pen/wOyxor

（更新：我建议您不要对元素使用绝对位置，因为它的响应速度不是很好。）

Answer 2

我尝试过并工作：

.body-container .menu .title {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
.body-container .body-text {
    text-align: center;
    margin: auto;
    display: block;
    position: absolute;
    top: 115px;
    left: 315px;

Answer 3

我总是使用margin：0自动；而且几乎所有时间都有效

HTML Wont中心

test

3 个答案: