css - 如何让弹性项目定位在与中心对齐的网格元素内
问题描述
我正在为一家披萨店构建一个反应应用程序,但在让我的项目与 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;
}
解决方案
您的问题似乎是您的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;
}
推荐阅读
- javascript - 在 resolve() 期间更改 React 材料表中的状态变量
- excel - 如何在 Excel 中创建基于数字和字符的转换掩码
- php - 没有错误,但 fwrite() 不会写入文件
- ios - 没有 Storyboard 的 iOS 13 项目显示很有趣
- java - 我应该如何继续检查移动数据连接
- fonts - 从 SwiftUI.Font 转换为 UIFont
- c - 如何从 C 中的二维字符数组中获取字符串?
- javascript - 我有一个电子应用程序,但打印按钮不起作用
- ios - SwiftUI 以编程方式将文本或按钮添加到 Zstack
- r - 根据 col A 行 N 和 col B 行 N+1 的值之间的差异插入行