When attempting to align an image in the middle vertically inside a DIV on my website, it does not work properly. This issue does not occur when I do it on jsFiddle. It appears there may be a CSS conflict that I am unable to identify.
I have applied the same CSS as in the working jsFiddle example, but on the actual website, the logo always aligns to the top position.
I would greatly appreciate any assistance with this matter.
Possible 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>