Images float inside DIV

Question

I have a problem with images. The images are not floating, but it does work in the center. However, i want the images floating and center of the div.. Here is my code.

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

I followed this question : Question solved. But it still doesn't work.

The problem is the images are not floating, but it's in the center. Any ideas?

Answer 1

It's because p is block element and it will automatically fill width of his parent div and because img has text-align:center, it is in center of that p element. If you want to have those images floated, you can try set display:inline-block on those p elements instead of img elements.

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

Working Fiddle