CODEWITHSUNDEEP
htmlcsshref
user3098549
user3098549

Reputation: 1259

How to align <a><img></a> tags withina div

I have a list of links with images within a div tag. The size of the images is set dynamically, so that the height is fixed to the 25% of the parent div width and the width is auto. I've set the float:left attribute to the images to have a grid style, but now I want to center the images within the div. Here a piece of code:

 <div>
    <a title="gallery" href="images/silvia.b&amp;w.jpg" data-gallery="">
        <img src="thumbnails/silvia.b&amp;w.jpg_New.jpg" style="height: 162.55625px;">
    </a>
    <a title="gallery" href="images/silvia 165.jpg" data-gallery="">
        <img src="thumbnails/silvia 165.jpg_New.jpg" style="height: 162.55625px;">
    </a>
    ...other images
 </div>

and the css:

#text a img{
    position:relative;
    margin:0.5%;
    float: left;
    border: 1px solid #999;
    padding: 0.5%;
    background: #000;
    -webkit-filter: grayscale(100%);
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    -ms-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
}
#text a img:hover {
    -webkit-filter: none;
    -webkit-transform: scale(1.85,1.85);
    -moz-transform: scale(1.85,1.85);
    -o-transform: scale(1.85,1.85);
    -ms-transform: scale(1.85,1.85);
    transform: scale(1.85,1.85);
    z-index:100;
}

How can I center the images?

Upvotes: 3

Views: 76

Answers (2)

Andy G
Andy G

Reputation: 19367

If you remove float: left they are centred, in combination with setting text-align: center with their parent div.

That is, their immediate (first) parent div; give this an id.

Upvotes: 2

FBC
FBC

Reputation: 1132

I use : text-align:center if not try to play with width and use float:left and text-align:center

Upvotes: 0

Related Questions