Question

我尝试了一切，但不能将我的菜单放在中心位置，是否有人可以帮助我？就像在图像中img我觉得问题出在我的CSS中...... 它只是留在左边。有任何想法吗？提前谢谢你。

<!DOCTYPE html>
<html>

<head>
  <title>Sweets</title>
  <link rel="stylesheet" type="text/css" href="project1.css" </head>

  <body>

    <div>
      <ul>
        <li><a href="#">1</a>
          <ul>
            <li><a href="#">2</li>
      <li><a href="#">3</li>
      <li><a href="#">4</li>
      <li><a href="#">5</li>
     
     </ul>
    </li>
    <li><a href="#">6</a>
            </li>
            <li><a href="#">7</a>
            </li>
            <li><a href="#">8</a>
            </li>
            <li><a href="#">9</a>
            </li>
          </ul>
    </div>

  </body>

</html>

reduce

Answer 1

低挂果答案：

最简单的解决方法是将ul设置为display: inline-block，并将包含div设置为width: 100%; and text-align: center。

＆＃13;

body {
  background-image: url(2cg3c.jpg);
}
.menu-container {
    width: 100%;
    text-align: center;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-block;
}
ul li a {
  text-decoration: none;
  color: white;
  display: block;
}
ul li {
  float: left;
  width: 200px;
  height: 40px;
  background-color: black;
  font-size: 20px;
  line-height: 40px;
  text-align: center;
  opacity: .7;
  border: 3px solid #285189;
}
ul li a:hover {
  background-color: red;
}
ul li ul li {
  display: none;
}
ul li:hover ul li {
  display: block
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Sweets</title>
  <link rel="stylesheet" type="text/css" href="project1.css" </head>

  <body>

    <div class="menu-container">
      <ul>
        <li><a href="#">1</a>
          <ul>
            <li><a href="#">2</li>
      <li><a href="#">3</li>
      <li><a href="#">4</li>
      <li><a href="#">5</li>
     
     </ul>
    </li>
    <li><a href="#">6</a>
            </li>
            <li><a href="#">7</a>
            </li>
            <li><a href="#">8</a>
            </li>
            <li><a href="#">9</a>
            </li>
          </ul>
    </div>

  </body>

</html>

＆＃13;

当您将元素的显示设置为inline-block时，该元素将具有inline元素和block元素的质量。换句话说，它是一个可以像html文本一样运作的块元素，因此text-align: center等属性将适用于它。

其他答案

还有其他3种方法可以使元素居中，每种方法都适用于不同的情况： http://codepen.io/jzhang300/pen/QdwjMz

1）display: block和margin: auto 这对于居中具有指定宽度的东西很有用。

2）flexbox 对于大多数情况，这是布局元素的最全面的方法。这样做的好处是你也可以垂直对齐元素，而不仅仅是水平对齐。

3）position: absolute 当您想要使尺寸超过容器尺寸的元素居中时，这非常有用。它也垂直居中。

我如何在中心对齐我的CSS下拉菜单？

1 个答案:

低挂果答案：

其他答案