Question

我有一个3x3的flexbox，每个项目/单元格中都有一个图标和标题。我只是试图水平居中图标（svg图像）。我试过justify-content: center;，但它似乎不起作用。可以告诉我如何在Flexbox项目（或单元格，如我所指的那样）中水平居中图像？代码如下。

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;
}

Answer 1

您可以尝试使用经典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;
}

或使用text-align：

const tap = require('tap');
mock('moduleTwo', {
    // export whatever you need, just don't open websockets
});
// now moduleOne will require your mock instead of real moduleTwo
const moduleOne = require('moduleOne');
tap.equal(moduleOne.functionToTest(),1);

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

1 个答案: