2014-03-03 200 views
3

我有一個圖像有問題。圖像不是浮動的,但它在中心工作。但是,我想圖像浮動和div的中心..這是我的代碼。圖像漂浮在DIV

HTML

<div class="middle-align"> 
    <div id="gallery-left"> 
     <div class="gallery-left-middle"> 
      <p class="gallery-photo"> <a rel="gallery_group" href="#" title=""><img alt="" src="assets/images/welcome.jpg" /></a> </p> 
      <p class="gallery-photo"> <a rel="gallery_group" href="#" title=""><img alt="" src="assets/images/welcome.jpg" /></a> </p> 
      <p class="gallery-photo"> <a rel="gallery_group" href="#" title=""><img alt="" src="assets/images/welcome.jpg" /></a> </p> 
      <p class="gallery-photo"> <a rel="gallery_group" href="#" title=""><img alt="" src="assets/images/welcome.jpg" /></a> </p> 
     </div> 
    </div> 
</div> 

CSS

.gallery-left-middle {text-align:center;} 
#gallery-left img{float:none;display:inline-block;width:180px;height:180px;} 

我跟着這個問題:Question solved。但它仍然不起作用。

問題是圖像不漂浮,但它在中心。有任何想法嗎?

+0

參見定位和浮動w3cschools。 – alexmac

回答

1

這是因爲p是塊級元素,它會自動填補他的父母divwidth因爲imgtext-align:center,它是在p元素的中心。 如果您想讓這些圖像浮動,您可以嘗試在這些p元素上設置display:inline-block而不是img元素。

.gallery-left-middle {text-align:center;} 
.gallery-photo {display: inline-block;} 
img{width:180px;height:180px;} 

Working Fiddle