html - 如何在css网格中居中div
问题描述
我的代码中有那个 jsx(ProfileUpload
s 的父级):
<div className="profileuploads-container">
{items.map((item, index) => {
return (
<ProfileUpload
key={index}
images={item.images}
Title={item.title}
Location={item.location}
Quantity={item.quantity}
Price={item.price}
id={item.id}
/>
);
})}
</div>
使用以下CSS
.profileuploads-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
text-align: center;
grid-gap: 20px;
justify-self: center;
align-self: center;
}
ProfileUpload
看起来像这样:
<div className="profileupload-container">
<ImageGallery
items={props.images}
showFullscreenButton={false}
showPlayButton={false}
showThumbnails={false}
showBullets={true}
renderLeftNav={renderLeftNav}
renderRightNav={renderRightNav}
/>
<p className="title">{props.Title}</p>
<p className="iconed">
<img src={LocationIcon} alt="fasf: " />
{props.Location}
</p>
<p className="iconed">
<img src={PersonIcon} alt="asfa: " />
{props.Quantity}
</p>
<p className="iconed">
<img src={MoneyIcon} alt="fsafa: " />
{props.Price}₾
</p>
<DeleteButton id={props.id} />
</div>
CSS:
.profileupload-container {
display: inline-block;
background-color: #ffffff;
border: 1px solid #e4e6e5;
text-align: center;
padding-bottom: 20px;
height: 270px;
width: 20vw;
position: relative;
}
我想在网格中居中这些元素。
解决方案
我自己找到了答案。
.profileuploads-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-gap: 10px;
justify-items: center; /*Added This Line*/
}
这将使网格中的项目居中
推荐阅读
- excel - 对根据满足条件 VBA 变化的范围求和
- python - 在 SciKit-Learn GradientBoostingClassifier 中无需改装即可去除零重要性特征
- php - 缺少依赖文件时 CD Laravel 维护模式失败
- c# - 将引用 .NET Framework 项目添加到 .NET Core 项目
- qt - PyQt5 QTableWidget 右键单击单元格不会产生 QMenu
- python - 使用内部函数不起作用的正则表达式查找和替换操作
- reactjs - 在 React 中渲染数据时遇到问题
- python - 如何在 Visual Studio Code 中为可执行文件和库设置 python 环境路径
- php - 无法在 Siteground/Wordpress 上集成 AliDropship WooCommerce 插件
- arrays - 将数组值插入 $scalar - Perl