我的主页上有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>
根据您的代码段,我简要浏览了您的网站。当前,您正在互相嵌套几个div
。要实现所需的功能,必须在父母容器中设置text-align: center;
。在您的情况下,您的父级内部有2个子级div
,这两个子项(两者)占用父级div
宽度的100%。
[作为简短示例,您可以在带有文本的display: none;
上使用div
(只是将div
隐藏起来),在父级上使用text-align: center;
。之后,您的图像应居中。这样做之后,您可能会看到包含文本的div
必须较小。如果要使文本显示在图像下方,只需在文本display: block;
上使用div
。
#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>