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;}

我关注了这个问题：Question solved。但它仍然无效。

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

Answer 1

这是因为p是块元素，它会自动填充其父width的{{1}}，因为div有img，它位于那个text-align:center元素。如果您想要浮动这些图片，可以尝试在p元素而不是display:inline-block元素上设置p。

img

Working Fiddle

图像浮在DIV中

1 个答案: