Question

我发现此网页存在一些HTML \ CSS问题：http://www.saranistri.com/saranistriWPnew/?page_id=613

正如您在此页面中看到的那样，有一个名为： abusivismo1-641x321.jpg

的图像

这个immage是这个div容器结构：

具有clasas vc_span12 wpb_column column_container 的div包含另一个具有类 wpb_wrapper 的div，其中包含 wpb_single_image wpb_content_element centerizedImg ，其中包含具有类的div wpb_wrapper ，最终包含我的 abusivismo1-641x321.jpg

我希望将这个immage集中在它的容器中，使其位于页面的中心

我尝试设置一些CSS设置，例如：

width: 642px;
margin: 0 auto;

但没有工作

你能帮助我吗？

Tnx这么多

安德烈

Answer 1

这是解决方案。

.wpb_content_element.wpb_single_image img {
    display: table;
    height: auto;
    margin: 0 auto;
    max-width: 100%;
}

在您的班级.wpb_content_element.wpb_single_image img中替换上述值，您的图片将位于中心。

希望这有帮助。

Answer 2

只需将此样式添加到该类：

.wpb_single_image.wpb_content_element.centerizedImg {

text-align:center

}

如果你想确保只让图像居中，请使用display：inline-block;

设置图像包装的样式

只是一个没有边距的简单解决方案。

Answer 3

为了集中任何元素，您可以使用

margin-left: auto;
margin-right: auto;

另外，如果某个元素的专利有text-align: center

，则该元素将保持在中心位置

您还可以查看 Dead Centre

Answer 4

只需对text-align:center;课程使用wpb_wrapper即可。看看这个fiddle

Answer 5

使用margin-left:auto;和margin-right:auto;它将水平对齐到中心。

Answer 6

在某些情况下，根据您使用的内容，调整浏览器大小时图像不会自动调整大小;即移动浏览器。我想出了这个：

.wpb_wrapper {
    display:inline-block;
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
    padding: 0px 15px 0px 15px; /* adds some white space in left/right on mobile */
}

希望它有所帮助。

如何在此页面的中心水平居中显示此图像？

6 个答案: