Question

根据Bootstrap4文档，我们可以使用预定义的类align-items-center和justify-content-center来使内容垂直和水平对齐。我测试了Bootstrap4文档示例，它可以正常工作，但是在以下代码中使用align-items-center和justify-content-center类时，这是不可取的！我使用引导类创建ul标记display:flex，但它的内容（li tags）未水平对齐并垂直居中。我还检查了Chrome ul中的inspects媒体资源，其中包含margin-top: 0和margin-bottom: value。有什么问题？

HTML：

<body>
        <div id="top-ribbon" class="container-fluid">
            <div class="row align-items-center">
                <div id="socials" class="col-6 col-md-2 offset-md-2">
                    <ul class="d-flex align-items-center justify-content-center">
                        <li class="list-inline-item color-white"><i">1</i></li>
                        <li class="list-inline-item color-white">2<i"></i></li>
                    </ul>
                </div>
            </div>
        </div>

的CSS：

color-white{
    color: white;
}
#top-ribbon{
    background-color: rgb(168, 8, 133);
    border: 1px solid;
    height: 200px;
}
.row{
  height: 200px;
}
#top-ribbon div{
    border: 1px solid;
}
#socials ul{
  border: 1px solid;
}

JSFiddle

Answer 1

首先，您的HTML语法存在问题。其次，您需要意识到bootstrap中的ul元素上存在默认填充和边距。删除那些，你会得到所需的效果。

#socials ul {
    border: 1px solid;
    margin: 0; padding: 0;
}

https://jsfiddle.net/xxofsr68/3/

我为你做了两个例子。

Answer 2

首先添加通用类，即* {margin：0px;填充：0像素;} 它消除了额外的空间对于垂直对齐添加显示：flex;和align-flex：center;
在程序margin-bottom中添加，所以它应该是margin-bottom：0px;

＆＃13;

* {
  margin: 0px;
  padding: 0px;
}

.color-white {
  color: white;
}

#top-ribbon {
  background-color: rgb(168, 8, 133);
  border: 1px solid;
  height: 200px;
  Width:100%;float:left;
}

.row {
  height: 300px;
}

#top-ribbon div {
  border: 1px solid;
  height: 100%;
}

#socials {
  display: flex;
  align-items:center;
}

#socials ul {
 
  margin-bottom: 0px;

  width: 100%;
  float:left;text-align:center;
}

#socials ul li{float:left;}

＆＃13;

<div id="top-ribbon" class="container-fluid">
  <div class="row align-items-center justify-content-center">
    <div id="socials" class="col-6 col-md-2 offset-md-2">
      <ul class="d-flex align-items-center justify-content-center">
        <li class="list-inline-item color-white">1</li>
        <li class="list-inline-item color-white">2</li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

在bootstrap4中进行ul垂直对齐

2 个答案: