html - css div居中对齐

Question

我想在页面中央放置一组 div 容器。

div 包含标题和图像。外部 div 有一个边框，我想对齐图像标题以及图像本身以定位到外部 div 的中心。 作为引用这里是链接

  #container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 1000px;
    margin: 0 auto;
  }
  .menuicon {
    align-self: flex-start;
    border: 2px solid #808080;
    margin: 10px;
    padding: 4px;
    border-radius: 10px;
  }
  div.spacer {
    clear: both;
  }

<div id="container">
  <div class="spacer">
    &nbsp;
  </div>
  <div class="menuicon">
    <p>Image Header Title</p>
    <a href="#">
      <img src="image1.png" width="100" />
    </a>
  </div>
  <div class="menuicon">
    <p>Title</p>
    <a href="#">
      <img src="image2.png" width="100" />
    </a>
  </div>
  <div class="menuicon">
    <p>Longer Image Header Title</p>
    <a href="#">
      <img src="image3.png" width="100" />
    </a>
  </div>
  <div class="spacer">
    &nbsp;
  </div>
</div>

因此，在第 1、3 个情况下，由于图像标题较宽，图像应适合中心，但在第 2 个情况下，标题应相对于图像宽度位于中心

提前致谢!

Answer 1

只需在 menuicon 上使用 text-align:center;

.menuicon
  {
    align-self: flex-start;
    border: 2px solid #808080 ;
    margin: 10px;
    padding: 4px;
    border-radius: 10px;
    text-align:center; /* <--- this */
  }

Demo Fiddle

就视口(viewport)整体对齐而言，您还将 container 的 width 设置为 1000px，removing this will center to the viewport