HTML CSS中如何实现DIV中的图片水平垂直居中对齐

Posted 2023-05-10

html CSS中如何实现DIV中的图片水平垂直居中对齐，好像align:center,vertical-align:middle;没有作用

HTML CSS中实现DIV中的图片水平垂直居中对齐的方法：

所谓的图片水平垂直居中就是把图片放在一个容器元素中（容器大于图片尺寸或是指定了大小的容器），并且图片位居此容器正中间（中间是指元素容器的正中间），而图片不是以背景图片（background-image）形式展示，是以<img>元素形式展示的。如下图所示：

1、解决水平居中的办法：如果图片左浮动并且"display:inline"时，只要给图片设置一个"text-align:center"属性，就顺利解决了水平居中。

2、解决垂直居中的办法：使用display:table-cell和设置了display:inline-block的线合span。

完整例子：

html代码：

<ul class="imgWrap clearfix">
<li><a href="#" class="imgBox"><span></span><img src="images/img1.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img2.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img3.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img4.jpg" alt="" /></a></li>
</ul>

css代码：

<style type="text/css">
.imgWrap li
float: left;
border: solid 1px #666;
margin: 10px 10px 0 0;
list-style: none;
border-collapse: collapse;

.imgWrap a
background: #ffa url(images/gridBg.gif) repeat center;
width: 219px;
height: 219px;
display: table-cell;/*图片容器以表格的单元格形式显示*/
text-align: center; /* 实现水平居中 */
vertical-align: middle; /*实现垂直居中*/

.imgWrap a:hover
background-color: #dfd;

.imgWrap img
border: solid 1px #66f;
vertical-align: middle; /*图片垂直居中*/

</style>
实现效果如下：

参考技术A 图片水平垂直居中情况很多，最简单的办法是吧图片设置为背景，给背景设置background-position:center;

如果只能用图片

分两种情况：
1.图片宽高固定，这种情况很简单。
水平居中：就在图片的css中加 dispaly:block;margin:0 auto;

垂直居中：自己算出（div的高度-图片的高度）/2，得到margin-top值即可。

2.图片高度未知，这个布局比较难实现。一般我是用js做的。
水平居中：同上，在图片的css中加 dispaly:block;margin:0 auto;
垂直居中：用js算出（div的高度-图片的高度）/2，得到margin-top值赋给它。

曾经研究过网上的很多方法，个人觉得这个是最有效的了。 参考技术B

如果图片左浮动并且"display:inline"时，只要给图片设置一个"text-align:center"属性，就解决了水平居中。

使用display:table-cell和设置了display:inline-block的线合span，这样就解决垂直居中。

《HTML与CSS入门经典》是经典畅销图书《HTML与CSS入门经典》的最新版本，与过去的版本相同，本书采用直观、循序渐进的方法，为读者讲解使用HTML5与CSS3设计、创建并维护世界级Web站点的过程，以方便读者掌握。

分为24章，其涵盖的内容有理解Web的工作方式，构造HTML文档，理解层叠样式表、理解HTML5页面架构，处理文本块和列表，处理字体，处理颜色和边框，使用外部链接和内部链接，使用表格和栏，创建用于Web的图像。

第一部分简要地介绍了HTML和XHTML，阐述了网页的创建过程和发布步骤，讨论了如何连接到其他网页。

第二部分介绍了文本的对齐和格式化，讨论了文本链接、图像链接和图像映射，阐述了如何处理用于网页中的图像，还介绍了如何设置网页的背景和颜色。

第三部分讨论了如何使用表格、CSS和框架设计网页布局；第四部分探讨了如何使用脚本、表单和多媒体设计动态网页。

参考技术C display: flex;
justify-content: center;
align-items: center;
建议你应该先学习一下弹性布局

img外头包着a时底部出现的一小段高度的解决方法。图片水平垂直居中用css解决的方法。

<a><img/></a>

　　这种结构有时候在界面预览的时候会出现一段多出来的高度。这个高度，一开始我很奇怪是什么原因产生的。鼠标移动到a标签上会有高度出现，一开始我以为是a标签的高度。可是我看a是隐藏的，隐藏的不是不会有高度撑开吗？而且我设置了a的各种属性都无法解决这个问题。后来，我就想这会不会是别的标签。比如是外头的div或者是img标签。我又对外头的div各种鼓捣，也还是没有一丁点的反应。行了，问题显现的差不多了。这个时候我就去搞一搞img，不搞不知道，一搞吓一跳。还真是这玩意儿出的问题。我记得img的属性真是的很特别。因为它是行内块状标签。然后我给img设置了display:block;之后，高度没了。真的，还真是这个毛病。恩，下次碰到这个问题，只要设置块状标签就行了。本人记性不太好，不记录一下下次又忘了。

 

还有一个问题就是：图片的水平垂直居中和自适应

我先来说说我以前是怎么解决的。以前我是用js解决这个问题的。可是后来，我发现css直接就能很方便的解决这个问题。当然了，不知道是不是适合所有的业务逻辑场景。但是至少最近我碰到的，可以这么用。为了下次方便找到这个方法，我也记录一下，毕竟我记性不好。

<div>
	<img src="1.png">
</div>

　div设置text-align:center。设置一个高度，line-height=height 就能将图片居中，当然还可以img设置vertical-align:middle  也是可以垂直居中的。

其实这是最基本。谁叫我记性不好加是只笨鸟呢。只能将其记下来了。