如何以水平方式將此圖像置於此頁面的中心？

我發現這個網頁的一些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

如何以水平方式將此圖像置於此頁面的中心？

回答

相關問題