Vertical Align Image Inside Div

Question

I know there is like 100 of topics made and I've tried all 100's of them and I just can't get it to work, Aligning the image in the middle, if you check in to

http://one1.no-ip.org/index.php?hitta=tanto&page=search

you'll see that the logo is at the top of the screen and whatever I do I just can't make it align correctly. I'm sure something is interfering but I just can't find out what, I even made a fiddle to check if the method im using is working and it is

http://jsfiddle.net/UJATF/ Working example with the image in the middle of the div element

CSS

 .logo{ background:white; position:absolute; width:105px; height:90px; line-height:90px; left:180px; margin-top:20px; line-height:90px; text-align:center; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; box-shadow:inset 0px 0px 0px 1px white,inset 0px 0px 10px -4px black; z-index:1000; overflow:hidden; } .logo img{ vertical-align:middle; max-width:90px; max-height:40px; }

HTML

<div class="logo"> <a href="./index.php?page=profile&amp;id=377948"><img src="http://www.tantobil.se/images/logo.png"></a> </div>

so all help would be very much appreciated

Also have you tried firebug or chrome developer tools as you can see exactly what is inherited and what is blocking you — pengibot
– pengibot, Commented Nov 29, 2012 at 10:54
i want the image to be align in the middle like the fiddle shows, but I havent been able to achive — Breezer
– Breezer, Commented Nov 29, 2012 at 10:54
@pengibot Yes I've tried it and couldnt find anything that should interfere, but something still does... Haven't figured it out — Breezer
– Breezer, Commented Nov 29, 2012 at 10:55

Rohit Azad Malik · Accepted Answer · 2012-11-29 11:04:01Z

1

Define your anchor link display : inline-block and give to margin-top

as like this

.logo > a { display: inline-block; margin-top: 22px; }

Results is

enter image description here

--------

Is your are using dynamic with of img than used to this Second option is

.logo > a { display: table-cell; height: 90px; text-align: center; vertical-align: middle; width: 105px; }

edited Nov 29, 2012 at 11:04

answered Nov 29, 2012 at 10:58

Rohit Azad Malik

32.3k17 gold badges72 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Breezer Over a year ago

the logo can Have diffrent sizes

Rohit Azad Malik Over a year ago

According to logo height define to margin top

xray1986 Over a year ago

This is the same result I'm seeing anyway.

Rohit Azad Malik Over a year ago

Check to my updated answer if your logo is put to the dynamic than used to this .logo > a { display: table-cell; height: 90px; text-align: center; vertical-align: middle; width: 105px; }

Breezer Over a year ago

@RohitAzad Still curious though why the other one didnt, work on the site but worked on jsfiddle =/

|

Stephan Muller · Accepted Answer · 2012-11-29 10:58:31Z

Since you're using fixed heights in your css, why don't you just use simple math to determine the top position of the logo?

.content is 121px high, .logo is 90px high

The difference is 31px, which means you need a top offset of 15.5px Also, set the .content to position: relative so you position the logo relatively to .content's top.

Collectives™ on Stack Overflow

Vertical Align Image Inside Div

2 Answers 2

--------

6 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

--------

6 Comments

2 Comments

Related