首页 > web前端 > css教程 > 如何使用 CSS 将图像在 Div 中水平和垂直居中?

如何使用 CSS 将图像在 Div 中水平和垂直居中?

Susan Sarandon
发布: 2024-11-24 09:36:12
原创
291 人浏览过

How to Center an Image Both Horizontally and Vertically Within a Div Using CSS?

在 Div 内居中并垂直对齐图像

对于给定的 HTML 片段:

`

<div> 如何使用 CSS 将图像在 Div 中水平和垂直居中?
`

可以使用 CSS 属性来调整图像的位置,使其在指定 div 内水平和垂直居中。

要将图像水平居中对齐,请使用:

#over img {
  margin-left: auto;
  margin-right: auto;
}
登录后复制

这会将图像向左对齐并div 的右边缘,从而实现居中放置。

要在中间垂直对齐图像,请使用以下方法将图像设置为块级元素:

#over img {
  display: block;
}
登录后复制

这允许图像占据 div 内可用空间的完整高度。

更新的 HTML 和 CSS 片段变成:

<div>
登录后复制
body {
  margin: 0;
}

#over img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
登录后复制

以上是如何使用 CSS 将图像在 Div 中水平和垂直居中?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
上一篇:如何使用 JavaScript 检测移动浏览器中的方向变化? 下一篇:如何创建带有小 Alpha 标记和右括号的 HTML 有序列表?
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
相关专题
更多>
热门推荐
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板