登录
当前位置： 首页 > 面试题库 >

如何在div中垂直对齐图像

黎浩然
2023-03-14
问题内容：

如何在容器中对齐图像div？

例

在我的例子，我需要垂直居中的<img>在<div>用class ="frame“：

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

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

在这里查看jsfiddle 。

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

问题答案：

唯一的（和最好的跨浏览器）的方式，因为我知道是使用inline-block佣工height: 100%，并vertical-align: middle在这两个元素。

因此，有一个解决方案：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://html" target="_blank">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>

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

通过该解决方案:before，并expression()为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>

怎么运行的：

  1. 当两个inline-block元素彼此靠近时，可以使彼此的边对齐，这样vertical-align: middle您将得到如下所示：

两个对齐的块

  1. 当你有固定的高度（在一个块中px，em或另一个绝对值单元），可以设置在内部块的高度%。

  2. 所以，加入一个inline-block具有height: 100%与固定高度块将对准另一inline-block它元素（<img/>你的情况），垂直接近它。



 类似资料：
  • div中的垂直对齐图像

    问题内容： 我在div中垂直对齐图像时遇到问题 据我所知，我需要“显示：块；” 定位图像在中心，这是可行的。同样在教程中，我找到了很多答案，但它们并不是“有用的”，因为我的所有图像都不在同一高度！ 问题答案： 如果容器中的高度固定，则可以将line-height设置为与高度相同，并且它将垂直居中。然后只需添加text-align使其水平居中即可。 编辑 您的代码应如下所示： 更新 现在是2016年

  • 如何在div中垂直对齐文本？

    问题内容： 我试图找到最有效的方法来使div对齐文本。我尝试了几件事，但似乎都没有用。 问题答案： 对于CSS 2浏览器，可以使用/ 来使内容居中。 jSFiddle提供了一个示例： 可以将旧浏览器（Internet Explorer 6/7）的hack合并为样式，并用于从较新的浏览器中隐藏样式：

  • 如何在div中垂直对齐元素？

    问题内容： 我有一个包含两个图片的div和一个。它们都需要在div内垂直对齐，彼此相邻。 其中一张图片需要放在div内。 要在所有常见的浏览器上运行，需要什么CSS？ 问题答案： 简而言之： 内联元素 （并且 仅 内联元素）可以在上下文中垂直对齐。但是，“上下文”不是整个父容器的高度，而是它们所在的文本行的高度 对于块元素，垂直对齐更加困难，并且在很大程度上取决于特定情况： 如果内部元件可以有一个

  • 在div中垂直对齐文本

    问题内容： 下面的代码（也可以在JSFiddle上作为演示使用没有将文本放在中间，正如我理想中的那样。即使使用属性，我也找不到任何方法可以使文本垂直居中。我怎样才能做到这一点？ 问题答案： 创建一个用于文本内容的容器，也许是。 JSFiddle

  • 如何使用CSS在DIV中垂直对齐图像和文本？

    问题内容： 我在div内有一个图像和一些文本，我想使用CSS将图像和文本放在div的垂直中心。问题是我不知道会有多少行文本，但是文本和图像必须始终在中间。例如，当只有一行文本时，div应该如下所示： 如果最终我有更多行或文本的高度大于图像的高度，则图像应对齐，如下所示： 我很难获得这种效果，没有使用javascript可以做到这一点吗？ 观察 我指的div的父div具有position：relat

  • 垂直对齐图像

    问题内容： 我有一个包含图像和ap标签的div（如下所示）。我想根据段落的多少行在div的中间垂直对齐图像。垂直对齐不起作用。我现在正在使用JavaScript找出要添加到margin- top的数量，但是宁愿使用CSS。有任何想法吗？ 问题答案： 尝试将元素的属性设置为图像的高度，例如： 编辑： 刚意识到我读错了问题，却错过了多行的事实。尝试的一种选择是完全删除元素，并将其设置为of的，使用的o

相关阅读

如何使用CSS在DIV中垂直对齐图像和文本？垂直对齐图像垂直对齐div（无表格）CSS垂直对齐浮动div使用margin：auto垂直对齐div

相关文章

直接插入排序（图文）不安全的直接对象引用用Python教你如何在论文中画出漂亮的插图BBAT实习集齐之后群面姐绝对勇往直前！

相关问答

按钮中文本和图标的垂直对齐如何在Bootstrap 4中垂直居中div？[副本]垂直对齐盒布局间距？swift中文本的垂直对齐方式引导程序4中的垂直对齐

相关工具

jQuery的垂直SlideshowSmooth Div ScrollAnimated Collapsible DIV齐博CMS之X1功能齐全的计算器

相关文档

跟老齐学 Python亿景智图帮助中心目睹企业直播帮助文档获得场景视频 云直播文档更好的 Java 中英文对照
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.