CODEWITHSUNDEEP
htmlcss
designersvsoft
designersvsoft

Reputation: 1859

image alignment issue

I have used different brand images in different width and height. I want to display the images in horizontally and vertically centered. Please see the following Fiddle.

http://jsfiddle.net/FXQhv/

Upvotes: 0

Views: 74

Answers (3)

Shailender Arora
Shailender Arora

Reputation: 7778

It seems you forgot to define line-height so now you just have to add line-height in your css :

    .ngg-gallery-thumbnail {
    border: 1px solid #CCCCCC;
    display: inline;
    float: left;
    height: 100px;
    margin-bottom: 5px;
    margin-left: 5px;
    text-align: center;
    width: 120px;
    line-height:100px;
}

demo:- http://jsfiddle.net/FXQhv/3/

read more about Centering (horizontally and vertically) an image in a box

Upvotes: 1

Ryano
Ryano

Reputation: 2120

Add the following

.ngg-gallery-thumbnail-box a { display:table-cell; width:120px; height:100px; vertical-align:middle; }

Upvotes: 0

sandeep
sandeep

Reputation: 92803

GIve line-height same as height of the DIV. Write like this:

.ngg-gallery-thumbnail-box {
    float: left;
    line-height: 100px;
}

Check this http://jsfiddle.net/FXQhv/1/

Upvotes: 2

Related Questions