如何在Flex项目（单元格）中对图像进行居中

我有一个3x3 flexbox，每个项目/单元格中带有图标和标题。我只是试图水平居中图标（SVG图像）。我试过justify-content: center;，但它似乎没有工作。任何人都可以告诉我如何在Flexbox项目（或单元格，如我所说的那样）内水平居中放置图像？下面的代码。如何在Flex项目（单元格）中对图像进行居中

HTML：

<div class="grid"> 
    <div class="cell"> 
     <img src="images/cs_icon_01.svg"> 
     <div class="service-title">Materials Handling, Warehousing &amp; 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; 
}

来源

2017-02-03 Colin Stewart

我们称他们为 “元素”，而不是 “项目”，或者更糟糕， “细胞”，这让人想起表。 Flex'ed元素及其内容是标准的HTML元素。 – Rob

谢谢Rob。我在Flexbox文章上看到它是容器>物品。可能只是作者的措辞。我只是使用单元格来明确什么是以什么为中心。 –

你可以给一个尝试经典display + margin：

.grid img { 
    width: 45px; 
    display:block; 
    margin:auto;/* horizontal center effect */ 
}

，或者使用文本对齐：

.cell { 
    flex: 0 0 30%; 
    height: 220px; 
    margin-bottom: 20px; 
    /*justify-content*/ text-align: center; 
}

来源

2017-02-03 14:14:27

什么......！我确信我已经尝试过。我想不是 - 它的工作！谢谢。 –

的easyest方式将是<center><img src="images/cs_icon_01.svg"></center> :)

小提琴：https://jsfiddle.net/p10cokw9/

来源

2017-02-03 14:16:39

它的工作，谢谢！然而，它在网上说中心标签（我不知道）在HTML5中不被支持，所以其他答案得到它。 –

如何在Flex项目（单元格）中对图像进行居中

回答

相关问题