Question

所以我试图使用flexbox和bootstrap将V形箭头对准屏幕中心，但是每当我尝试使用align-self: center;或align-content: center;时它什么都没做，我的箭头只是可以水平对齐而不是垂直对齐，你们有什么捷径可以实现我使用flexbox要做的事情吗？

这是我的代码：

html
{
width: 100%;
height: 100%;
}

body{
width: 100%;
height: 100%;
background-color: white;
}

#arrow
{
color: grey;
font-size: 30px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<i id="arrow" class="fas fa-chevron-down d-flex justify-content-center align-self-center"></i>

Answer 1

您已经尝试过div容器是一件好事，但是您还必须确保容器具有一定的大小：

body {
  background-color: white;
}

#arrow-container {
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#arrow {
  color: grey;
  font-size: 30px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div id="arrow-container">
  <i id="arrow" class="fas fa-chevron-down"></i>
</div>

编辑：然后，您甚至不需要Bootstrap flex类。顺便说一句，您不需要在容器上使用position: absolute;或将vw和vh用作单位。我刚添加它是因为您想在屏幕上居中。

Answer 2

由于某种原因，%从未为我工作。所以我正在使用这个one

不能垂直和水平对齐项目

2 个答案: