Question

所以我想将我的图像和按钮居中放在容器1 div的第一个和最后一个div中。但是，它似乎不想居中，我也不明白为什么。我很想知道为什么它没有居中以及如何居中居中。

.container-1 {
  display: flex;
}

.container-1 div {
  border: 1px #ccc solid;
  padding: 10px;
}

.container-1 .body {
  flex-grow: 1
}

.container-1 .box-img img {
  align-items: center;
  height: 75px;
}

.container-1 .box-button button {
  align-self: center;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-1">

  <div class="box-img">
    <img src="https://images.squarespace-cdn.com/content/5c2aec4b1137a6d8849debf1/1589482673361-JFOXBM38XYSJQ9MUBEDW/image-asset.jpeg?format=1000w&content-type=image%2Fjpeg" />
  </div>

  <div class="body">
    <h3>Title</h3>
    <p>Description</p>
  </div>

  <div class="box-button">
    <button class="btn btn-primary">Button</button>
  </div>

</div>

Answer 1

基本上，您想使用：

display: flex;
align-items: center;

在父元素上。那将使孩子们垂直居中。

看看-下面的工作代码。

.container-1 {
  display: flex;
}

.container-1 div {
  border: 1px #ccc solid;
  padding: 10px;
}

.container-1 .body {
  flex-grow: 1
}

.box-img {
  display: flex;
  align-items: center;
}
.box-img img {
  height: 75px;
}

.box-button {
  display: flex;
  align-items: center;
  
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-1">

  <div class="box-img">
    <img src="https://images.squarespace-cdn.com/content/5c2aec4b1137a6d8849debf1/1589482673361-JFOXBM38XYSJQ9MUBEDW/image-asset.jpeg?format=1000w&content-type=image%2Fjpeg" />
  </div>

  <div class="body">
    <h3>Title</h3>
    <p>Description</p>
  </div>

  <div class="box-button">
    <button class="btn btn-primary">Button</button>
  </div>

</div>

如何使用Flexbox在div内垂直居中放置内容

1 个答案: