如何垂直对齐div内的图像 [英] How to vertically align an image inside a div

查看：30
本文介绍了如何垂直对齐div内的图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何在包含 div 的内部对齐图像?

示例

在我的示例中，我需要使用 class ="frame 将 垂直居中于

":

<img src="http://jsfiddle.net/img/logo.png";/>

.frame 的高度是固定的，图片的高度是未知的.如果这是唯一的解决方案，我可以在 .frame 中添加新元素.我正在尝试在 Internet Explorer 7 及更高版本、WebKit、Gecko 上执行此操作.

查看 jsfiddle 此处.

.frame {高度:25px；/* 等于最大图像高度 */行高:25px；宽度:160px；边框:1px纯红色；文本对齐:居中；边距:1em 0；}图片{背景:#3A6F9A；垂直对齐:中间；最大高度:25px；最大宽度:160px；}

<img src="http://jsfiddle.net/img/logo.png" height=250/>
<div类=框架><img src="http://jsfiddle.net/img/logo.png" height=25/>

<div类=框架><img src="http://jsfiddle.net/img/logo.png" height=23/>

<div类=框架><img src="http://jsfiddle.net/img/logo.png" height=21/>

<div类=框架><img src="http://jsfiddle.net/img/logo.png" height=19/>

<div类=框架><img src="http://jsfiddle.net/img/logo.png" height=17/>

<div类=框架><img src="http://jsfiddle.net/img/logo.png" height=15/>

<div类=框架><img src="http://jsfiddle.net/img/logo.png" height=13/>

<div类=框架><img src="http://jsfiddle.net/img/logo.png" height=11/>

<div类=框架><img src="http://jsfiddle.net/img/logo.png" height=9/>

<div类=框架><img src="http://jsfiddle.net/img/logo.png" height=7/>

<div类=框架><img src="http://jsfiddle.net/img/logo.png" height=5/>

<div类=框架><img src="http://jsfiddle.net/img/logo.png" height=3/>

解决方案

据我所知，唯一(也是最好的跨浏览器)方法是使用 inline-block 助手和 height: 100% 和 vertical-align: middle 在两个元素上.

所以有一个解决方案:http://jsfiddle.net/kizu/4RPFa/4570/

.frame {高度:25px；/* 等于最大图像高度 */宽度:160px；边框:1px纯红色；空白:nowrap；/* 这是必需的，除非你把辅助跨度靠近 img */文本对齐:居中；边距:1em 0；}.helper {显示:内联块；高度:100%；垂直对齐:中间；}图片{背景:#3A6F9A；垂直对齐:中间；最大高度:25px；最大宽度:160px；}

<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px/>
<div class="frame"><span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px/>

<div class="frame"><span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px/>

<div class="frame"><span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px/>

<div class="frame"><span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px/>

<div class="frame"><span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=17px/>

<div class="frame"><span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=15px/>

<div class="frame"><span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=13px/>

<div class="frame"><span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=11px/>

<div class="frame"><span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=9px/>

<div class="frame"><span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=7px/>

<div class="frame"><span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=5px/>

<div class="frame"><span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=3px/>

或者，如果您不想在现代浏览器中添加额外元素并且不介意使用 Internet Explorer 表达式，则可以使用伪元素并使用方便的表达式将其添加到 Internet Explorer，该表达式仅运行每个元素一次，所以不会有任何性能问题:

:before 和 expression() 用于 Internet Explorer 的解决方案:http://jsfiddle.net/kizu/4RPFa/4571/

.frame {高度:25px；/* 等于最大图像高度 */宽度:160px；边框:1px纯红色；空白:nowrap；文本对齐:居中；边距:1em 0；}.frame:之前，.frame_before {内容: "";显示:内联块；高度:100%；垂直对齐:中间；}图片{背景:#3A6F9A；垂直对齐:中间；最大高度:25px；最大宽度:160px；}/* 将其移至条件注释 */.框架 {列表样式:无；行为:表达式(函数(t){t.insertAdjacentHTML('afterBegin','<span class="frame_before"></span>');t.runtimeStyle.behavior = '无';}(这个));}

<div class="frame"><img src="http://jsfiddle.net/img/logo.png" 高度=250px/></div><div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=25px/></div><div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=23px/></div><div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=21px/></div><div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=19px/></div><div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=17px/></div><div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=15px/></div><div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=13px/></div><div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=11px/></div><div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=9px/></div><div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=7px/></div><div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=5px/></div><div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=3px/></div>

<小时>

工作原理:

  1. 当你有两个 inline-block 元素彼此靠近时，你可以将每个元素对齐到对方的一侧，所以使用 vertical-align: middle 你会得到这样的东西:

  2. 当你有一个固定高度的块(以px、em或其他绝对单位)时，你可以在%.

  3. 因此，在具有固定高度的块中添加一个 inline-block 和 height: 100% 将对齐另一个 inline-block 元素它( 在你的情况下)垂直靠近它.

How can you align an image inside of a containing div?

Example

In my example, I need to vertically center the <img> in the <div> with class ="frame":

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

.frame's height is fixed and the image's height is unknown. I can add new elements in .frame if that's the only solution. I'm trying to do this on Internet  Explorer 7 and later, WebKit, Gecko.

See the jsfiddle here.

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center;
    margin: 1em 0;
}
img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=15 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=13 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=11 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=9 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=7 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=5 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=3 />
 </div>

解决方案

The only (and the best cross-browser) way as I know is to use an inline-block helper with height: 100% and vertical-align: middle on both elements.

So there is a solution: http://jsfiddle.net/kizu/4RPFa/4570/

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap; /* This is required unless you put the helper span closely near the img */

    text-align: center;
    margin: 1em 0;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=17px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=15px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=13px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=11px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=9px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=7px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=5px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=3px />
</div>

Or, if you don't want to have an extra element in modern browsers and don't mind using Internet Explorer expressions, you can use a pseudo-element and add it to Internet Explorer using a convenient Expression, that runs only once per element, so there won't be any performance issues:

The solution with :before and expression() for Internet Explorer: http://jsfiddle.net/kizu/4RPFa/4571/

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap;

    text-align: center;
    margin: 1em 0;
}

.frame:before,
.frame_before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

/* Move this to conditional comments */
.frame {
    list-style:none;
    behavior: expression(
        function(t){
            t.insertAdjacentHTML('afterBegin','<span class="frame_before"></span>');
            t.runtimeStyle.behavior = 'none';
        }(this)
    );
}

<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=250px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=25px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=23px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=21px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=19px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=17px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=15px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=13px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=11px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=9px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=7px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=5px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

How it works:

  1. When you have two inline-block elements near each other, you can align each to other's side, so with vertical-align: middle you'll get something like this:

  2. When you have a block with fixed height (in px, em or another absolute unit), you can set the height of inner blocks in %.

  3. So, adding one inline-block with height: 100% in a block with fixed height would align another inline-block element in it (<img/> in your case) vertically near it.

这篇关于如何垂直对齐div内的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆