在 div 标签中垂直居中图像[重复]

2024-04-26

可能的重复:
图像垂直和水平居中? CSS https://stackoverflow.com/questions/2478434/center-an-image-vertically-and-horizontally-css

我该如何将 div 标签中的图像设置在正中心?

我只能找到指南text-align:center;,这会将其放置在中间,但不会调整垂直高度。


动态垂直居中有两个选项。

  1. 您使用 Javascript 获取元素的高度,然后进行一些数学计算,将元素的顶部设置为父级高度的一半减去元素的一半。
  2. You use display: table和百分比以使其正确对齐,如下所示本文 http://www.jakpsatweb.cz/css/css-vertical-center-solution.html.

我也有过一些运气line-height and vertical-align,但这不是动态的。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 div 标签中垂直居中图像[重复] 的相关文章

  • 防止浏览器弹出警告窗口

    我正在尝试在新窗口中打开 jsp 页面 使用 JavaScriptwindow open产生浏览器警告 并且在某些情况下 firefox 将默认阻止弹出窗口 有没有办法解决这个问题 这不是恶意应用程序 它是内部用户工具 大多数浏览器不会阻止
  • 为什么 textarea 不是 input[type="textarea"]?

    为什么有一个元素
  • Ionic iPhone X 安全区域无法正常工作

    我正在尝试在顶部工具栏和底部选项卡区域之间安装一个 我需要它能够在 iPhone 5 X 和 iOS 10 11 上运行 如果你忽略iOS10 那么就不存在问题 但我还需要旧版本才能工作 这是我的 CSS margin top 在 iOS
  • 元标记内的属性 property="og:title" 是什么?

    我有网站源代码的摘录 这是做什么的属性属性代表什么 其目的是什么 og title是开放图元标签之一 og 属性定义社交图中的对象 例如 Facebook 使用它们 og title代表对象的标题 因为它应该出现在图表中 请参阅此处了解更多
  • 为什么 Chrome 给 body 元素添加边距? [复制]

    这个问题在这里已经有答案了 我有简单的 html 文档 是进入身体的一种元素 当我在 div 元素中设置 margin top 时 Chrome 会向 body 添加相同的边距 边距仅在开发者工具中可见 我的代码 div Test div
  • 自动更改时 onChange 事件不起作用

    我在一个选择框 usageDisplays 上有一个 onChange 事件 它根据第一个选择框的选定值填充下一个选择框
  • 使用javascript隐藏html元素

    JavaScript function hide article var htmlElement document getElementsByTagName article 0 htmlElement setAttribute visibi
  • 突出显示 Html 文档中不同标签的文本

    我是新来的角js 现在我正在突出显示 HTML 文档中的文本 So 我的代码是这样的 var InstantSearch highlight function container highlightText var internalHigh
  • 如何将水平 ul 列表中的项目与图像垂直对齐?

    我有以下 html 代码 div ul li a href index php site login About a li li a href index php site login FAQ a li li a href http twi
  • Video.js - 阻止点击播放功能

    我正在使用 video js 将视频嵌入到 HTML 页面中 它将用作仅适用于 ipad 的 Web 应用程序 因此我相信它使用的是本机 HTML5 播放器 我正在尝试禁用点击播放功能 以便用户必须使用控件 但我在这样做时遇到了麻烦 我尝试
  • 使用 jQuery 对 CSS 变换进行动画处理

    我正在尝试为 div 制作动画 并让它绕 y 轴旋转 180 度 当我调用以下代码时 出现 jQuery 错误 my div animate transform rotateY 180deg webkit transform rotateY
  • 页面其余部分完成加载后延迟加载 html5 视频

    我有一个视频元素用作我正在构建的页面底部部分的背景 我试图通过将 src 存储为 data src 属性并使用 jQuery 在其他资源加载后将其应用到 src 属性 因为它不是英雄图像或任何东西 我想加载海报以节省加载时间 然后稍后加载视
  • document.registerElement - 为什么我们需要指定“prototype”和“extends”?

    考虑我想扩展本地button元素 并创建我自己的super button元素 据我所知 它必须遵循以下模式 var SuperButton document registerElement super button prototype Ob
  • 如何像在浏览器中一样检索准确的 HTML

    我正在使用 Python 脚本来呈现网页并检索其 HTML 它适用于大多数页面 但对于其中一些页面 检索到的 HTML 不完整 我不太明白为什么 这是我用来废弃此页面的脚本 由于某种原因 每个产品的链接不在 HTML 中 Link http
  • 将 DIV 转换为单击并拖动视口

    有人知道一种不显眼的 基于原型或无框架的方法将具有大内容 例如地图 的 DIV 转换为具有固定尺寸的可点击和可拖动的 地图 容器 非常像 Google 地图 我想在大型输入表单中显示 HTML 块 这些块可能会超出可用空间 每个块可以有大约
  • 如何保存包含框架/iframe 的完整 html 页面?

    在网页抓取期间 我想将当前页面的 html 保存到文件中以供以后调试 browser html在大多数情况下有帮助 但是当页面包含 iframe frame 时 它 的内容不会返回browser html 我必须用类似的东西单独得到它bro
  • 将水平线添加到 html rmarkdown 文档隐藏文本部分

    我正在制作一个与 HTML 页面结合的 Rmarkdown 文档 我不想用标题或项目符号分隔某些文本部分 而是想在它们之间绘制水平线 根据http rmarkdown rstudio com authoring basics html ht
  • 如何制作实时jquery效果?

    我想制作一个实时提要阅读器 并且我想要一个解决方案 使新项目无需刷新页面即可出现 并且具有像friendfeed一样的滚动效果 你可以在这里看到我在说什么 http www vimeo com 4029954 http www vimeo
  • 为什么-标签没有关闭

    这是一个普遍问题 我的教授都无法回答 为什么我不必关闭 HTML 中的标签 所有其他标签都必须关闭 例如 or 那么为什么不呢 首先 它根本不是一个标签 在名义上基于 SGML 或 XML 的 HTML 版本中 它是文件类型声明 它具有在
  • 使用命令行将 MediaWiki 维基文本格式转换为 HTML

    我倾向于编写大量文档 因此 MediaWiki 格式对我来说很容易理解 而且比编写传统 HTML 节省了我很多时间 然而 我也写了一篇博客 发现一直从键盘切换到鼠标来输入正确的 HTML 标签会增加很多时间 我希望能够使用 Mediawik

随机推荐