Question

我遇到ul问题。我可以集中它，但现在我不能。这是我的代码

＆＃13;

.wrapper{
    position: fixed;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
    padding: 50px 50px 50px 50px;
    float: left;
}
.nav{
    list-style-type: none;
    display: inline-block;
   
}

ul li{
    text-align:center;
    float: left;
}

＆＃13;

<div class="wrapper">
<ul class="nav">
 <li><a href='#'><div class="wrap"><img src="img/13.jpg" alt="" width="200"    height="200" class="w1"></div></a></li>
 <li><a href='#'><div class="wrap"><img src="img/11.jpg" alt="" width="200" height="200" class="w2"></div></a></li>
 <li><a href='#'><div class="wrap"><img src="img/12.jpg" alt="" width="200" height="200" class="w3"></div></a></li>
 <li><a href='#'><div class="wrap"><img src="img/14.jpg" alt="" width="200" height="200" class="w4"></div></a></li>           
</ul>
  
            </div>

＆＃13;

我试图只使用ul但我决定使用包装元素，但我仍然不知道该怎么做。我想垂直和水平居中。

Answer 1

有时候我们添加了太多的CSS而迷路了。使用包装器是正确的方向，只需使用flexbox使所有孩子居中。

垂直和水平居中，首先你需要一个至少与屏幕视图大小一样大的容器，否则，你的元素将位于页面的顶部，因为容器太小了。所以使用：

min-width: 100vw;
min-height: 100vh;

当你有更多项目时，宽度和高度会增长但是项目仍然会使用flexbox居中：

  display: flex;
  align-items: center;
  justify-content: center;

使用以下方法列出一行中的所有li：

.nav>li {
  float: left;
}

从HTML正文中删除默认的填充边距：

html,
body {
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100vw;
  min-height: 100vh;
  background: green;
}

.nav {
  list-style-type: none;
  background: red;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav>li {
  float: left;
}

html,
body {
  margin: 0;
  padding: 0;
}

<div class="wrapper">
  <ul class="nav">
    <li>
      <a href='#'>
        <div class="wrap"><img src="img/13.jpg" alt="" width="200" height="200" class="w1"></div>
      </a>
    </li>
    <li>
      <a href='#'>
        <div class="wrap"><img src="img/13.jpg" alt="" width="200" height="200" class="w1"></div>
      </a>
    </li>
    <li>
      <a href='#'>
        <div class="wrap"><img src="img/13.jpg" alt="" width="200" height="200" class="w1"></div>
      </a>
    </li>
  </ul>
</div>

Answer 2

或者，如果您想使用现有代码，只需将高度和宽度替换为100px而不是200px。

Answer 3

如果你想以任何div为中心，那么使用我刚刚尝试创建一个简单登录页面的代码。

    #divLogin
    {
        width: 450px;
        border-radius: 5px;
        font-size: 18px;
        padding: 10px;
        margin-top: 20%;
        margin-left: auto;
        margin-right: auto;
    }

以css为中心的div和/或ul

3 个答案: