Image not aligning inside div

Question

I am able to align image in middle vertically inside DIV when i do it on jsFiddle but same is not working when i do it on the website it seems it is conflicting with some CSS which i am not able to locate.

I am using the same CSS which i used for the jsFiddle example , On actual website logo always come aligned at top position.

I would appreciate help in this regarding.

Solution

<script type="text/javascript">
    $(document).ready(function () {
        var h = $("#BannerSlider").height();
        $.map($("#BannerSlider img"), function (e) {
            var top = (h - $(e).height()) / 2;
            $(e).css("margin-top", top);
        });
    });
</script> 
    <title></title>
    <style>
.SponsorLogos
{
    width:600px;
    margin-top:50px;
    margin-left:60px;
    min-height:550px;
    background:red;
}
.SponsorLogoWrapper
{
    width:160px;
    height:160px;
    margin-right:30px;
    margin-bottom:30px;
    border:1px solid #78AC1B;
    line-height:160px;
    text-align:center;
    overflow:hidden;
    float:left;

}
.SponsorLogoWrapper img
{
    display: inline-block;
    border:0px;
}

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <div class="SponsorLogos">

          <div id="BannerSlider" class="SponsorLogoWrapper" >
               <img src="http://www.nikolakis.net/liquidcarousel/images/01.jpg" width="88" height="126" alt="image"/>
               </div>
         <div id="BannerSlider" class="SponsorLogoWrapper" >
                <img src="http://www.nikolakis.net/liquidcarousel/images/02.jpg" width="88" height="110" alt="image" />
                 </div>
        <div id="BannerSlider" class="SponsorLogoWrapper" >
                <img src="http://www.nikolakis.net/liquidcarousel/images/03.jpg" width="88" height="100" alt="image"/>
                       </div>
         <div id="BannerSlider" class="SponsorLogoWrapper" >
                <img src="http://www.nikolakis.net/liquidcarousel/images/04.jpg" width="88" height="126" alt="image"/>
                       </div>
        <div id="BannerSlider" class="SponsorLogoWrapper" >
                <img src="http://www.nikolakis.net/liquidcarousel/images/05.jpg" width="88" height="90" alt="image"/>
           </div>
</div>

    </div>
    </form>

Answer 1

If you switch the jsFiddle DOCTYPE to match your websites the images align to the top again (you can do this in the info panel on the left).

With that in mind you could check this answer: Vertical-align not working with XHTML 1.0 Transitional doctype?

Response to first comment

Well the easiest thing to do would be to change the DOCTYPE. If you can't do that then you need to find another method entirely. Vertical align works best with tables so you could change the display props to be table based. Here is an example: http://jsfiddle.net/64UnS/1/

I don't know if you'll be able to implement this - browser support varies. Of course you are using display: inline-block; already and I didn't see an IE7 fallback so maybe this is fine for you.

Other options could include:

making your images 160 x 160px
changing the markup so that the each image is output as a background-image inline on the <a /> tag. This is then easy to center (of course you'll need to be sure of your image dimensions - background-size support is even less well supported)
using a javascript solution (I see you hav jQuery in the <head /> already)

Hope that helps!

Answer 2

我相信这是因为实际网站使用XHTML过渡文档类型，而JS小提琴使用HTML5（html）文档类型。

Image not aligning inside div

Question

2 answers

solution1
4 ACCPTED 2012-08-13 11:01:41

solution2
0 2012-08-13 11:06:36

Image not aligning inside div

Question

2 answers

solution1 4 ACCPTED 2012-08-13 11:01:41

solution2 0 2012-08-13 11:06:36

solution1
4 ACCPTED 2012-08-13 11:01:41

solution2
0 2012-08-13 11:06:36