Home/ Questions/Q 8364089
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T12:20:56+00:00

I am able to align image in middle vertically inside DIV when i do

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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!

    • 0