Question

我的主页上有2张图像，这些图像与此垂直居中。

#pgc-10-1-1.panel-grid-cell {
display: inline-block;
float: none !important;
vertical-align: middle;

}

#pgc-10-3-0.panel-grid-cell {
display: inline-block;
float: none !important;
vertical-align: middle;

}

但是，我希望它们在水平和垂直方向都居中当我不使用float: none !important;时，图像水平居中，但不是垂直居中。当我使用float: none !important;时，图像垂直居中但不水平居中。如何让它同时水平和垂直居中？谢谢！这是实时网页 - http://www.travelersuniverse.com/。这可能不是台式机上的问题，但在移动设备上肯定看起来很糟糕，因为图像左侧对齐，右侧有很多空白区域。

<div class="panel-grid-cell" id="pgc-10-1-1" >
  <div class="so-panel widget widget_sow-editor panel-first-child panel-last-child" id="panel-10-1-1-0">
    <div class="so-widget-sow-editor so-widget-sow-editor-base">
      <div class="siteorigin-widget-tinymce textwidget">
        <p>
          <img style="text-align: center;" title="Me" src="http://www.travelersuniverse.com/wp-content/uploads/2014/03/laura_pic.jpg" alt="Me" width="208" height="208" />
        </p>
      </div>
    </div>
  </div>
</div>

Answer 1

根据您的代码段，我仔细研究了您的网站。您目前正在将几个div嵌套在一起。要实现您的目标，您必须在父容器中设置text-align: center;。在您的情况下，您的父母内部有2个孩子div，这两个孩子（都在一起）占据您父亲div宽度的100％。

作为一个简短的示例，您可以使用display: none;（仅隐藏div）div上的文字和text-align: center;在您的父文件上。之后，您的图像应居中。执行此操作后，您可能会发现包含文本的div必须更小。如果您希望文字显示在图片下方，只需在文字display: block;上使用div。

Answer 2

#pgc-10-1-1.panel-grid-cell {
  display: block;
  float: none !important;
  background-color: blue;
  width: 500px;
  height: 500px;
  position: absolute;
}

#pgc-10-1-1.panel-grid-cell > div{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }

#pgc-10-3-0.panel-grid-cell {
  display: inline-block;
  float: none !important;
  vertical-align: middle; 
}

<div class="panel-grid-cell" id="pgc-10-1-1" >
  <div class="so-panel widget widget_sow-editor panel-first-child panel-last-child" id="panel-10-1-1-0">
    <div class="so-widget-sow-editor so-widget-sow-editor-base"><div class="siteorigin-widget-tinymce textwidget">
      <p>
        <img style="text-align: center;" title="Me" src="http://www.travelersuniverse.com/wp-content/uploads/2014/03/laura_pic.jpg" alt="Me" width="208" height="208" />
      </p>
      </div>
    </div>
  </div>
</div>

水平和垂直居中图像

2 个答案: