Flexbox网格对齐图像中心

Question

我想使用flexbox将图像和文本居中对齐

图像并排显示，图像下方显示文字

它曾经工作过，但是突然之间，图像只是放在左侧。

我尝试重新编写HTML和CSS代码，但仍得到相同的输出

我不知道为什么它突然改变了。

.buy-coffee-wrapper {
  margin-top: 50px;
  background-color: rgb(34, 25, 25);
}

.enjoy-home {
  text-align: center;
  padding-top: 25px;
  color: #fff;
  font-family: 'Lora', sans-serif;
  font-weight: normal;
}

.buy-coffee {
  margin-top: 20px;
  text-align: center;
  color: #fff;
  font-family: 'Multi', sans-serif;
}

.coffee-almond,
.coffee-cookieDough,
.coffee-vanilla {
  width: 50%;
  margin-left: 75px;
  margin-top: 50px;
}

.coffee-almond:hover,
.coffee-cookieDough:hover,
.coffee-vanilla:hover {
  border: 1px solid rgb(255, 255, 255);
  padding: 10;
}

.coffee-name,
.coffee-price {
  text-align: center;
  margin-top: 25px;
  color: #fff;
  font-size: 18px;
  font-family: 'Lora', sans-serif;
}

<div class="container">
  <div class="grid">
    <div class="cell packaging1-wrapper">
      <img src="./img/coffee-cookieDough.png" class="responsive-image coffee-cookieDough">

      <h5 class="coffee-name">Cookie Dough</h5>
      <h6 class="coffee-price">£2.49</h6>
    </div>
  </div>

  <div class="cell packaging2-wrapper">
    <img src="./img/coffee-almond.png" class="responsive-image coffee-almond">

    <h5 class="coffee-name">Amaretto Almond</h5>
    <h6 class="coffee-price">£2.49</h6>
  </div>

  <div class="cell packaging2-wrapper">
    <img src="./img/coffee-vanilla.png" class="responsive-image coffee-vanilla">

    <h5 class="coffee-name">Very Vanilla</h5>
    <h6 class="coffee-price">£2.49</h6>
  </div>

</div>
</div>

</div>
</section>

Answer 1

在基本的原始术语中，这是使用CSS完成的操作。

BODY {
  background: #23191a;
  color: #ffffff;
}

.container {
  padding: 1rem;
}

.flex {
  display: flex;
  justify-content: center;
  text-align: center;
}

.product {
  text-align: center;
  width: 400px;
}

<div class="container">
  <div class="flex">
    <div class="product">
      <img src="https://i.imgur.com/1BXKfbX.png" alt="" />
      <h1>Journey to the center</h1>
      <p>The point that is equally distant from every point on the circumference of a circle or sphere.</p>
    </div>
  </div>
</div>

也请看小提琴。

https://jsfiddle.net/joshmoto/56xevdo7/

看起来您使用的是框架，但没有引导程序，如果框架相关，则必须参考文档。

Answer 2

为什么

UI损坏的原因是由于div关闭不当，尤其是包装器<div class="grid">

如何

使用具有弯曲方向div的包装器row完成布局，以便将所有.cell水平对齐，并且每个具有弯曲方向{{1}的'.cell' }垂直放置其中的内容。

column

修复

我已按照上述方法解决了该问题。我希望甚至您也打算这样做。

我已经创建了一个工作提琴供参考，请在下面找到链接：

https://jsfiddle.net/Baliga/kxeg8ufw/24/

输出

注意：我已经使用了虚拟/样本图像。

Answer 3

.cell {
  display: flex;
  flex-direction: column;
}
.cell .responsive-image {
  width: 50%;
  margin: 50px auto 0;
}
.grid {
  display: flex;
  justify-content: center;
}

...会做到的：

注意：您要先完成.grid之后关闭.cell元素。您需要在最后一个之后关闭它。如果仅在特定页面宽度上并排放置产品，则应在@media查询中将弹性行为包装在网格上：

@media (min-width: 768px) {
  .grid {
    display: flex;
    justify-content: center;
  }
}

.buy-coffee {

margin-top: 20px;
text-align: center;
color: #fff;
font-family: 'Multi', sans-serif;

}


.coffee-almond,
.coffee-cookieDough,
.coffee-vanilla {

width: 50%;
margin-left: 75px;
margin-top: 50px;
}

.coffee-almond:hover,
.coffee-cookieDough:hover,
.coffee-vanilla:hover{

border: 1px solid rgb(255, 255, 255);
padding: 10;

}

.coffee-name, 
.coffee-price {

text-align: center;
margin-top: 25px;
color: #fff;
font-size: 18px;
font-family: 'Lora', sans-serif;
}

body {background-color: #ccc}
.cell {
  display: flex;
  flex-direction: column;
}
.cell .responsive-image {
  width: 50%;
  margin: 50px auto 0;
}
.grid {
  display: flex;
  justify-content: center;
}

<div class="container">
  <div class="grid">
    <div class="cell packaging1-wrapper">
      <img src="https://picsum.photos/300/200" class="responsive-image coffee-cookieDough">

      <h5 class="coffee-name">Cookie Dough</h5>
      <h6 class="coffee-price">£2.49</h6>
    </div>
    <div class="cell packaging2-wrapper">
      <img src="https://picsum.photos/300/200" class="responsive-image coffee-almond">

      <h5 class="coffee-name">Amaretto Almond</h5>
      <h6 class="coffee-price">£2.49</h6>
    </div>

    <div class="cell packaging2-wrapper">
      <img src="https://picsum.photos/300/200" class="responsive-image coffee-vanilla">

      <h5 class="coffee-name">Very Vanilla</h5>
      <h6 class="coffee-price">£2.49</h6>
    </div>
  </div>

</div>

注意：实际上，您只需要在CSS上指定所有类，而不必在集合中的每个元素上添加单独的类，而只需要指定CSS中的每个类即可。类的重点是将相同的行为应用于多个元素（这就是为什么我使用cell和image-responsive类）。
如果您希望某个元素具有某些特定行为，则可能应该使用id。

另一种可能的解决方案是将块级元素与margin:auto一起使用，而不要使用flexbox：

.cell:hover .responsive-image {
  border: 1px solid rgb(255, 255, 255);
  padding: 10;
}

.cell * {
  display: block;
  margin: auto;
}
.coffee-name,
.coffee-price {
  text-align: center;
  margin-top: 25px;
  color: #fff;
  font-size: 18px;
  font-family: 'Lora', sans-serif;
}

body {
  background-color: #ccc
}

.responsive-image {
  width: 50%;
  margin: 50px auto 0;
  border: 1px solid transparent;
}

.grid {
  display: flex;
  justify-content: center;
}

<div class="container">
  <div class="grid">
    <div class="cell packaging1-wrapper">
      <img src="https://picsum.photos/300/200" class="responsive-image coffee-cookieDough">

      <h5 class="coffee-name">Cookie Dough</h5>
      <h6 class="coffee-price">£2.49</h6>
    </div>
    <div class="cell packaging2-wrapper">
      <img src="https://picsum.photos/300/200" class="responsive-image coffee-almond">

      <h5 class="coffee-name">Amaretto Almond</h5>
      <h6 class="coffee-price">£2.49</h6>
    </div>

    <div class="cell packaging2-wrapper">
      <img src="https://picsum.photos/300/200" class="responsive-image coffee-vanilla">

      <h5 class="coffee-name">Very Vanilla</h5>
      <h6 class="coffee-price">£2.49</h6>
    </div>
  </div>

</div>