图片在DIV内浮动

Question

我能看出来您在图片方面有些问题。图片没有浮动，但是它可以居中。不过，我相信您想要这些图片既能浮动又能居中于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;}

我遵循了这个问题：问题已解决。但它仍然无效。

问题是图像没有浮动，但它在中心。有什么想法吗？

- Anthosiast

---

请参考w3cschools关于定位和浮动的内容。 - alexmac

Answer 1

这是因为p是块级元素，它会自动填充其父元素div的width，而img具有text-align:center，因此它位于该p元素的中心。 如果您想让这些图像浮动，可以尝试在p元素上设置display:inline-block，而不是在img元素上。

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

工作中的 Fiddle

- Krab