将图像水平和垂直居中

问题描述 投票:0回答:2

我的主页上有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;时,图像垂直居中,但不水平居中。如何同时将其水平和垂直居中?谢谢!

<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;" src="site" width="208" height="208" />
        </p>
      </div>
    </div>
  </div>
</div>
html css
2个回答
1
投票

根据您的代码段,我简要浏览了您的网站。当前,您正在互相嵌套几个div。要实现所需的功能,必须在父母容器中设置text-align: center;。在您的情况下,您的父级内部有2个子级div,这两个子项(两者)占用父级div宽度的100%。

[作为简短示例,您可以在带有文本的display: none;上使用div(只是将div隐藏起来),在父级上使用text-align: center;。之后,您的图像应居中。这样做之后,您可能会看到包含文本的div必须较小。如果要使文本显示在图像下方,只需在文本display: block;上使用div


0
投票

#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;" src="site" width="208" height="208" />
      </p>
      </div>
    </div>
  </div>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.