如何以水平方式将此图像置于此页面的中心？

我发现这个网页的一些HTML \ CSS困难：http://www.saranistri.com/saranistriWPnew/?page_id=613 如何以水平方式将此图像置于此页面的中心？

正如你可以在这个页面看到有一个名为IMMAGE：abusivismo1-641x321.jpg

这IMMAGE是到这个div容器结构：

具有在div clasas vc_span12 wpb_column column_container含有具有类wpb_wrapper包含本身wpb_single_image此其他分区wpb_content_element centerizedImg含有具有类wpb_wrapper是finnally包含我abusivismo1-641x321.jpg

我想这个中心IMMAGE在其容器中，这样的方式是在页面的中心DIV

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

width: 642px; 
margin: 0 auto;

但不起作用

你能帮我吗？

TNX这么多

安德烈

来源

2013-10-11 AndreaNobili

这里是解决方案。

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

在你的班级.wpb_content_element.wpb_single_image img中替换上面的值，你的图像将在中心。

希望这会有所帮助。

来源

2013-10-11 11:40:58 Nitesh

，以集中的任何元素，你可以使用

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

也，一个元素会留在中心，如果它是专利拥有text-align: center

您也可以看看Dead Centre

来源

2013-10-11 11:48:39

只需将该款式添加到该类别中：

.wpb_single_image.wpb_content_element.centerizedImg { 

text-align:center 

}

如果您想确保只获取图像居中，请使用display显示图像的包装：inline-block;

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

来源

2013-10-11 12:06:30 Alex

仅为wpb_wrapper课程使用text-align:center;。看看这个fiddle

来源

2013-10-11 12:22:54 Roman

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

来源

2013-10-11 12:37:15

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

.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 */ 
}

希望它可以帮助别人。

来源

2014-06-13 00:01:43 Op3Ra7Or

如何以水平方式将此图像置于此页面的中心？

回答

相关问题