css - 如何在 CSS Grid 中使图像居中?
问题描述
如何使图像在左侧垂直居中,文本在右侧?
.pricing1box {
display: grid;
grid-template-columns: repeat(auto-fit, 300px);
color: #444;
margin-top: 150px;
justify-content: center;
}
.pricing1box-div {
background-color: orange;
color: #fff;
border-radius: 5px;
font-size: 150%;
}
<div class="pricing1box">
<div class="pricing1box-div">
<img src="http://placehold.it/350x150.png" style="float: left; display: inline-block; width: 100px; vertical-align: middle;">
<h6 style="color: black; padding: 10px;">Title</h6>
<p style="font: 10px blue;">Powered by me</p>
<br>
<p>A dgdfg dfgdhdgfh fdgh dhdfg wertdfg dfgdh ergdfgd egr dfgdhd hdfh </p>
</div>
</div>
解决方案
您也可以在图像和文本上使用网格属性。只需将父级设为网格容器即可。
.pricing1box {
display: grid;
grid-template-columns: repeat(auto-fit, 300px);
justify-content: center;
color: #444;
}
.pricing1box-div {
display: grid; /* new; nested grid container */
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
background-color: orange;
color: #fff;
border-radius: 5px;
font-size: 150%;
}
.pricing1box-div img {
grid-column: 1;
grid-row: 1 / -1; /* from first line at start, to first line at end */
align-self: center; /* vertical centering */
width: 100px;
}
.pricing1box-div :not(img) {
grid-column: 2;
}
<div class="pricing1box">
<div class="pricing1box-div">
<img src="http://placehold.it/350x150.png">
<h6 style="color: black; padding: 10px;">Title</h6>
<p style="font: 10px blue;">Powered by me</p>
<p>A dgdfg dfgdhdgfh fdgh dhdfg wertdfg dfgdh ergdfgd egr dfgdhd hdfh </p>
</div>
</div>
推荐阅读
- c# - 什么是 asp.net Web 表单中的“__VIEWSTATE_KEY”隐藏输入字段以及它的用途
- unity3d - unity 3d 反向浮点值
- mysql - 获取所有月份的列表和当月订购的产品数量,并且没有订单的月份应该有'0' - mysql
- python-3.x - Python/Pandas:如何检测趋势是否突然增加“X”量
- android - 哪个android api可以替代GMSGeometryIsLocationOnPathTolerance ios API?
- java - 为什么当通过 API 网关调用时,Java 中的这个 AWS Lambda 代码会返回“内部服务器错误”?
- javascript - 如何检查嵌套数组是否为空?
- android - 从 Firebase 问题中删除 android 应用
- reactjs - ReactJS:在上传之前调整图像大小
- vba - VBA wordapp.document.open 和 selection.WholeStory