CODEWITHSUNDEEP
htmlcss
haha
haha

Reputation: 1532

How do I set correctly vertical align middle on image

Example I have set the master div with 100px the height. In the div have one logo which I want it to be vertical-align:middle;

Here an example http://jsfiddle.net/c7Me7/

I want the logo will be auto align to middle without have a padding or margin.

Output should be like

enter image description here

Let me know

Upvotes: 1

Views: 516

Answers (4)

Amit Singh
Amit Singh

Reputation: 1746

#top { height:100px; background:#000; padding:0 20px;position:relative}
#logo {position:absolute;top:30% }

Try this top can be adjusted as per need

Thanks, Amit

Upvotes: 0

Joe Hanink
Joe Hanink

Reputation: 4847

UPDATED: This works.

#top { height:100px; background:#000; padding:0 20px;line-height:100px;}
#logo img {vertical-align: middle;}

see - http://jsbin.com/utuye5/2

Upvotes: 2

nkcmr
nkcmr

Reputation: 11010

http://jsfiddle.net/c7Me7/7/

use text-align:center

Upvotes: 0

Daveloper
Daveloper

Reputation: 159

Please take a look at this page, it advices on several ways to solve this.

http://blog.themeforest.net/tutorials/vertical-centering-with-css/

Upvotes: 1

Related Questions