如何居中對齊包裹在SPAN標籤中的img？

我想中心對齊一個包裹在<span>中的圖像，但我遇到了麻煩。我已經將我的CSS和HTML上傳到jsfiddle：http://jsfiddle.net/7nHhu/1/如何居中對齊包裹在SPAN標籤中的img？

我試圖讓圖像中心與「塊」樣式中的內容對齊（即，所有上下文中的文本，未包裹到左側或正確）

任何幫助將不勝感激。

.imgframe { 
border: 1px solid #EAEAEA; 
display: inline-block; 
margin: 8px; 
} 
.imgframe img { 
border: 1px solid #FFFFFF; 
margin: 0; 
background: #F6F6F6; 
padding: 8px; 
-moz-box-shadow: 2px 2px 5px #CCCCCC; 
-webkit-box-shadow: 2px 2px 5px #CCCCCC; 
} 

<span class="imgframe centerimg"><img src="http://i48.tinypic.com/31368e9.jpg" /></span>

來源

2012-07-06 JROB

那麼爲什麼不使用'顯示：block'了'.imgframe'元素？或者，更好的是，使用'div'？ – 2012-07-06 22:54:01

只是使圖像包裝塊級元素和text-align:center;它。

FIDDLE

，或者如果需要在另一元件包裹它;

FIDDLE

來源

2012-07-06 22:54:43 Musa

在.imgframe中，增加寬度：100％;

來源

2012-07-06 22:52:23 TheGeekYouNeed

...但我不希望框架佔據頁面的整個寬度，只在圖像邊緣以外8px。 – JROB 2012-07-06 22:57:16

然後用一個div圍繞它，並在div上使寬度達到100％。容器必須知道頁面的中心寬度。 – TheGeekYouNeed 2012-07-07 00:00:42

考慮您的要求，爲.imgframe元素保持在線，以避免它採取了封閉元素的整個寬度，並且不增加包裹片的加價，以下工作工作：

body { 
    text-align: center; 
} 

body p { 
    text-align: left; 
}

JS Fiddle demo。

如果您將Fiddle中的元素包裹在特定的可目標元素中，這可能不那麼具有侵入性;而不是body，因爲上面的方法要求您爲body中包含的所有元素重置text-align。因此，就個人而言，我會使用：

<div id="contentWrapper"> 
    <p>...</p> 
    <span class="imgframe"> 
     <img src="..." /> 
    </span> 
    <p>...</p> 
</div>

和：

#contentWrapper { 
    text-align: center; 
} 

#contentWrapper p { 
    text-align: left; 
}

只是爲了儘量減少事後清理工作所需的量。

來源

2012-07-06 22:59:50

我認爲使用文本對齊來定位文本而不是圖片更合適。您可以通過設置左右邊距自動將圖像居中。

img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    height: auto; 
    padding-top: 10px; //margin-top doesn't work 
}

Demo

來源

2014-05-19 11:48:07 Foreever

如何居中對齊包裹在SPAN標籤中的img？

回答

相關問題