如何在弹性项目(单元格)中居中放置图像 [英] How to center an image within a flex item (cell)
本文介绍了如何在弹性项目(单元格)中居中放置图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个3x3的Flexbox,每个项目/单元格中都有一个图标和标题。我只是试图将图标(SVG图像)水平居中。我尝试了 justify-content:center;
,但它似乎不起作用。有谁能告诉我如何在flexbox项(或单元格,我指的是它)内水平居中放置图像?以下代码。
I have a 3x3 flexbox with an icon and title in each item/cell. I am just trying to horizontally center the icon (svg image). I tried justify-content: center;
but it doesn't seem to work. Can any tell me how to horizontally center an image within a flexbox item (or cell, as I am referring to it as)? Code below.
HTML:
<div class="grid">
<div class="cell">
<img src="images/cs_icon_01.svg">
<div class="service-title">Materials Handling, Warehousing & Storage Facility Management</div>
</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
</div>
CSS:
.grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-bottom: 130px;
}
.cell {
flex: 0 0 30%;
height: 220px;
margin-bottom: 20px;
justify-content: center;
}
.grid img {
width: 45px;
}
.service-title {
display: inline-block;
font-family: Montserrat, Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 300;
color: #4e4e4e;
line-height: 24px;
padding: 20px 16px 4px 16px;
text-align: center;
}
推荐答案
您可以尝试经典的显示
+ 保证金
:
you can give a try to the classic display
+margin
:
.grid img {
width: 45px;
display:block;
margin:auto;/* horizontal center effect */
}
或使用text-align:
or use text-align:
.cell {
flex: 0 0 30%;
height: 220px;
margin-bottom: 20px;
/*justify-content*/ text-align: center;
}
这篇关于如何在弹性项目(单元格)中居中放置图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文