如何让弹性项目定位在与中心对齐的网格元素内

Question

我正在为一家披萨店构建一个 react 应用程序，但在使用 CSS 将我的项目相互对齐时遇到了一点问题。

我创建了一个比萨饼部分并在网格中对齐项目，但在每个 div 中，我都有一个对齐 flex 的 div。这些项目看起来还不错，只是看起来很分散。

这是我的目标：

这就是我得到的：

我认为这是我编写 JSX 代码的方式，但我重写并尝试设置它的样式，但仍然得到相同的结果。

我的 JSX 代码

<div className={styles.PizzaContainer}>
       <div>
         <img src={halfHalf} alt="half-half"/>
         <h1>Half & Half pizza</h1>
         <p>Two pizzas in one</p>
         <div>
          <h3>from ₦4,800</h3>
          <button>Create</button>
         </div>
       </div>
       <div>
          <img src={chickenCurry} alt="chickencurry"/>
          <h1>Chicken Curry</h1>
          <p>Red onions, bell peppers, chicken, pineapple, mozzarella, tomato sauce, curry, chili peppers</p>
         <div>
          <h3>from ₦3,100</h3>
          <button>Select</button>
        </div>
       </div>
       <div>
         <img src={pepperoniFresh} alt="pepperonifresh"/>
          <h1>Pepperoni Fresh</h1>
         <p>Pepperoni, mozzarella, green peppers, pizza sauce</p>
         <div>
          <h3>from ₦2,700</h3>
          <button>Select</button>
        </div>
       </div>
       <div>
         <img src={chickenBbq} alt="chickenbbq"/>
          <h1>Chicken BBQ</h1>
         <p>Chicken, red onions, corn, mozzarella, bbq sauce, tomato sauce</p>
         <div>
          <h3>from ₦2,700</h3>
          <button>Select</button>
        </div>
       </div>
       <div>
         <img src={sharwarmaPizza} alt="sharwarma"/>
          <h1>Shawarma Pizza</h1>
         <p>Mayonnaise & ketchup, spicy chicken, red onions, tomatoes, mozzarella</p>
         <div>
          <h3>from ₦3,100</h3>
          <button>Select</button>
        </div>
</div>

CSS

.PizzaContainer{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  column-gap: 10px;
}
.PizzaContainer div h1{
  font-size: 1.2rem;
}
.PizzaContainer div p{
  color: #918F8E;
  font-size: 0.9rem;
  text-align: left;
}
.PizzaContainer div>div{
  margin: 20px 0 5px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}
.PizzaContainer div>div h3{
  font-size: 1rem;
}

.PizzaContainer div>div button{
  background-color: white;
  color: #F97225;
  border: 1px solid #F97225;
  border-radius: 5px;
  padding: 10px;
  width: 100px;
}

Answer 1

您的问题似乎是您的p 标签有不同的高度。一个非常快速但短期的解决方法是给你的p 标签一个固定的高度，但这只会导致问题。

我要做的是将您的披萨“卡片”分成两部分，将图片、标题和描述组合在一起（“PizzaCardHeader”）并对价格和按钮（“PizzaCardFooter”）做同样的事情：

<div className={styles.PizzaContainer}>
  <div className={styles.PizzaCard}>
    <div className={styles.PizzaCardHeader}>
      <img src={halfHalf} alt="half-half" />
      <h1>Half & Half pizza</h1>
      <p>Two pizzas in one</p>
    </div>
    <div className={styles.PizzaCardFooter}>
      <h3>from ₦4,800</h3>
      <button>Create</button>
    </div>
  </div>
  ...
</div>

这样你就可以使用 flexbox 来确保它们对齐：

.PizzaContainer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-gap: 0.5em;
}

.PizzaCard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.PizzaCardHeader {
  width: 100%;
}

.PizzaCardHeader h1 {
  font-size: 1.2rem;
  width: 100%;
}

.PizzaCardHeader p {
  color: #918F8E;
  font-size: 0.9rem;
  text-align: left;
}

.PizzaCardFooter {
  margin: 20px 0 5px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}

.PizzaCardFooter h3 {
  font-size: 1rem;
}

.PizzaCardFooter button {
  background-color: white;
  color: #F97225;
  border: 1px solid #F97225;
  border-radius: 5px;
  padding: 10px;
  width: 100px;
}

小提琴：https://jsfiddle.net/q9bc8wua/1/