Question

我试图将div放在中心，但它无效。正如您在下面的代码中所看到的，我设置了边距，但div不会移动到中心。

body {
  margin: 0;
  padding: 0;
  font-family: Helvetica;
  font-weight: bold;
}

.body {
  margin: 0 auto;
}

ul {
  list-style-type: none;
  background-color: black;
  margin: 0;
  padding: 0;
  overflow: hidden;
  -webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
  box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
  width: 700px;
}

li {
  float: left;
}

li a {
  color: white;
  display: block;
  padding: 14px 16px;
  text-align: center;
  text-decoration: none;
}

.one, .two, .three, .name {
  border-bottom: 4px solid black;
}

.one:hover {
    border-color: #ED08FD;
}

.two:hover {
    border-color: #0821FD;
}

.three:hover {
    border-color: #FF41C0;
}

.name:hover {
  border-color: #DAD8D9;
}

.name {
  color: white;
  padding-left: 15px;
}

.main-body {
  text-align: center;
}

hr {
  border: 1px solid #6E6E6E;
}

.circle-row {
  width: 100px;ext-align: left;
  padding-left: 4cm;
  font-size: 35px;
}

.welcomeHeader, .background {
  border: 2px solid black;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="animate.css">
</head>
<body>
  <div class="body">
  <div class="navbar">
    <ul>
      <li class="name"><a href="#">JordanCodes</a></li>
      <li class="one"><a href="#">One</a></li>
      <li class="two"><a href="#">Two</a></li>
      <li class="three"><a href="#">Three</a></li>
    </ul>
  </div>

  <div class="header">
    <img src="header-background.jpg">
  </div>

  <div class="main-body">
    <h1 id="welcomeHeader">JordanCodes</h1>

    <br>
    <br>
    <br>
    <br>

  </div>
</div>
  <script src="scripts.js"></script>
</body>
</html>

我尝试将宽度设置为50％，这有效，但由于ul宽度设置为700px，div无法正确居中。

Answer 1

如果您想将ul元素居中，请尝试添加：

body {width:100%;}
ul {margin:auto;}

请参阅：https://jsfiddle.net/ty8858hq/

Answer 2

你的styles.css上的

尝试改变这个：

ul {
  list-style-type: none;
  background-color: black;
  margin: 0;
  padding: 0;
  overflow: hidden;
  -webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
  box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
  width: 700px;
}

到此：

ul {
  list-style-type: none;
  background-color: black;
  margin: 0 auto 0; /* When 3 values are entered, the first one is the value for the top margin, the second is for the horizontal margin and the third one is for the bottom margin */
  padding: 0;
  overflow: hidden;
  -webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
  box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
  width: 700px;
}

这应该让你的导航栏显示在页面的中心，我希望这对你有用！

Answer 3

我用来居中或至少使其靠近中心的属性应该有效。我已经完成了这个css。

.one {
    margin-left: 125px /*you can modify this*/;
}

您也可以将.one更改为.name，但.one看起来更好;

＆＃13;

body {
  margin: 0;
  padding: 0;
  font-family: Helvetica;
  font-weight: bold;
}

.body {
  margin: 0 auto;
}

ul {
  list-style-type: none;
  background-color: black;
  margin: 0;
  padding: 0;
  overflow: hidden;
  -webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
  box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
  width: 700px;
}

li {
  float: left;
}

li a {
  color: white;
  display: block;
  padding: 14px 16px;
  text-align: center;
  text-decoration: none;
}

.one {
  margin-left: 125px;
}
.one, .two, .three, .name {
  border-bottom: 4px solid black;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="animate.css">
</head>
<body>
  <div class="body">
  <div class="navbar">
    <ul>
      <li class="name"><a href="#">JordanCodes</a></li>
      <li class="one"><a href="#">One</a></li>
      <li class="two"><a href="#">Two</a></li>
      <li class="three"><a href="#">Three</a></li>
    </ul>
  </div>

  <div class="header">
    <img src="header-background.jpg">
  </div>

  <div class="main-body">
    <h1 id="welcomeHeader">JordanCodes</h1>

    <br>
    <br>
    <br>
    <br>

  </div>
</div>
  <script src="scripts.js"></script>
</body>
</html>

＆＃13;

CSS - Div没有正确居中

3 个答案: