如何使图像在更大的 div 内居中(垂直和水平)[重复]

2023-11-24

我有一个 200 x 200 像素的 div。我想在 div 中间放置一个 50 x 50 像素的图像。

如何做呢?

我可以使用它使其水平居中text-align: center对于 div。但垂直对齐是个问题。


在旧浏览器中工作(IE >= 8)

绝对位置与自动边距相结合允许将元素水平和垂直居中。元素位置可以基于使用相对定位的父元素位置。查看结果

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

如何使图像在更大的 div 内居中(垂直和水平)[重复] 的相关文章

  • 使用百分比 (%) 时如何计算填充?

    为什么本例中的内边距不等于 300 像素 Test width 600px padding right 50 box sizing border box background ddd div TEXT ETISI DHOASIHD I SA
  • Sass 负变量值?

    我有几个 scss 选择器 其中我使用相同数量的正数和负数 如下所示 padding 0 15px 15px margin 0 15px 20px 15px 我更喜欢对所有 15px 量使用一个变量 但这不起作用 pad 15px padd
  • 如何对 bootstrap-3 分页进行编程以处理简单的 HTML 内容

    我正在 新闻 部分工作 并尝试使用 jquery 使 bootstrap 3 分页工作 分页的 HTML
  • jQuery能否获取未绘制的动态元素的大小

    我的意思是如果我用 jQuery 和 DOM 创建一个 Element var MainHolder document createElement div addClass box 如果我打电话MainHolder width 如果不在窗口
  • POST 表单数据为 application/json

    我正在开发一个 API 它接收 application json post 请求 并触发一些流程 我目前的主要问题是发送一个 application json 帖子 其中包含来自输 入表单的数据 我已经尝试过 jQuery ajax 但由于
  • 无法在scrollView中滚动

    我有一个屏幕 我可以在输入字段中输入内容并获得相应的搜索结果 该列表在 ScrollView 中呈现 但当键盘打开时 在 Android 中 它仍然不允许我滚动 我怎样才能解决这个问题 return lt gt addressesFound
  • 等宽字体中的字体大小和字符宽度之间有什么依赖关系?

    等宽字体中的字体大小和字符宽度之间有什么依赖关系 在我的网络应用程序中 我使用 courier new 字体 我想知道 字符串的实际长度 以像素为单位 是多少 如果我知道CSS font size属性 它如何帮助我知道字符串的实际长度 谢谢
  • 列表中允许 div 吗? [复制]

    这个问题在这里已经有答案了 我知道DIV inside LI是不允许的 但我最近在许多 大 网站上看到了它 例如粉碎杂志 网页设计师墙 etc 我尝试验证网站 但它们有错误 但没有任何信息DIV in LI 那么我可以在里面使用它吗LI 我
  • 带滚动条的 HTML 画布

    我正在宽度不等的画布上绘制图表 每个画布可以有自己的滚动条吗 我尝试将所有画布放在一个 div 中并指定最大宽度 但它不起作用 是否有可能所有画布在页面上的可见宽度均为 500 像素 并且每个画布都有其滚动条来查看画布的整个宽度 谢谢 指定
  • 输入类型=“时间”超过24小时

    我刚刚遇到以下问题 在网络应用程序用户界面中 我希望用户输入响应消息的时间范围 以小时为单位 时间范围应最长为 72 小时 我们很乐意使用
  • 具有固定位置的平滑滚动标题

    当我将位置更改为固定时如何创建平滑滚动 我尝试添加动画但不起作用 最好使用jquery动画 window scroll function var sticky mobile menu scroll window scrollTop if s
  • Angular - Safari 无法正确显示 DOM

    我是 Angular 的新手 使用 Angular 4 我尝试通过在关联的组件类文件中设置属性来更新特定元素 但是 除非我尝试强制重新绘制网页 通过调整窗口大小等 否则页面不会更新 我打开检查器 看到 DOM 已更改 但显示与元素检查器中的
  • 无法做到最大宽度

    我有一个页面 内容如下 div testingtestingtestingtestingtestingtestingtestingtestingtesting testingtestingtestingtestingtestingtesti
  • 我将 X Y Z 坐标转换为屏幕 X Y 坐标有什么问题吗?

    我正在制作 3D 空间中弹跳的球体的 HTML5 Canvas 演示 这非常简单 每个球都有 X Y 和 Z 坐标 然后 这些坐标将转换为我在此处阅读的屏幕 X 和 Y 坐标 http answers google com answers
  • iframe 位置居中

    所以我找到了这段用于将内容放在中心的代码 但我的问题是它是为容器制作的 你知道如何为 iframe 制作它吗 或者你知道另一个代码吗 代码 center margin auto width 60 border 3px solid 73AD2
  • 如何使用 HTML5 Javascript Canvas 获取三个碰撞形状的交集并删除不碰撞的部分?

    我最近专门针对 KonvaJs 发布了类似的问题here https stackoverflow com questions 64603077 how can i get the intersection of three shapes c
  • 在 Selenium WebDriver 上如何从 Span 标签获取文本

    在 Selenium Webdriver 上 如何从 span 标记检索文本并打印 我需要提取文本UPS Overnight Free HTML代码如下 div id customSelect 3 class select wrapper
  • CSS 字体在 Firefox 中不起作用

    我下面有这个字体代码 它在谷歌浏览器中工作正常 但在火狐浏览器中根本不起作用 为什么
  • 两个 div 之间的匿名空白

    这里是Fiddle http jsfiddle net y6hSV 1 我有两个divs一个用于标题 另一个用于主体 在 的里面div这是标题 我还有另一个div那个 div 是floated left 因为那个floating 两者之间出
  • 右列固定的 Div 表

    我最近接手了一个非营利网站作为一个项目 我正在使用一个现有的网站 所以我必须使用很多已经编程的东西 所以我所要做的就是创建设计 I made a diagram of basically what I can t figure out ho

随机推荐