图像在div内未对齐
[英]Image not aligning inside div
问题描述
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. 
我可以在jsFiddle上在DIV中垂直对齐中间的图像，但是当我在网站上进行操作时却无法正常工作，似乎与某些我找不到的CSS冲突。
I am using the same CSS which i used for the jsFiddle example , On actual website logo always come aligned at top position. 我使用的是与jsFiddle 示例相同的CSS，在实际的网站徽标上总是对齐在顶部。
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>
2 个解决方案
解决方案1
4 已采纳 2012-08-13 11:01:41
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). 如果您切换jsFiddle DOCTYPE以匹配您的网站，则图像会再次与顶部对齐（您可以在左侧的信息面板中执行此操作）。
With that in mind you could check this answer: Vertical-align not working with XHTML 1.0 Transitional doctype? 考虑到这一点，您可以检查以下答案： Vertical-align不能与XHTML 1.0 Transitional doctype一起使用？
Response to first comment 对第一条评论的回应
Well the easiest thing to do would be to change the DOCTYPE. 那么最简单的事情就是更改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. 垂直对齐最适合表格，因此您可以将display道具更改为基于表格。 Here is an example: http://jsfiddle.net/64UnS/1/ 这是一个示例： 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; 当然，您正在使用display: inline-block; already and I didn't see an IE7 fallback so maybe this is fine for you. 已经，而且我没有看到IE7的备用广告，所以也许这对您来说很好。
Other options could include: 其他选项可能包括：
- making your images 160 x 160px 使您的图片尺寸为160 x 160px
- changing the markup so that the each image is output as a
background-imageinline on the<a />tag.更改标记，以使每个图像都作为<a />标记内联的background-image输出。 This is then easy to center (of course you'll need to be sure of your image dimensions -background-sizesupport is even less well supported)这样就很容易将其居中（当然，您需要确定图像尺寸-对background-size支持就更少了） - using a javascript solution (I see you hav jQuery in the
<head />already)使用JavaScript解决方案（我已经在<head />看到了jQuery了）
Hope that helps! 希望有帮助！
解决方案2
0 2012-08-13 11:06:36
我相信这是因为实际网站使用XHTML过渡文档类型，而JS小提琴使用HTML5（html）文档类型。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.