首页 / 知识
HTML CSS中如何实现DIV中的图片水平垂直居中对齐
2023-04-11 14:06:00
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.webp" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img2.webp" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img3.webp" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="images/img4.webp" 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.webp） 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>
实现效果如下：
水平垂直居中情况很多简单的是吧图片设置景，给背景设置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值赋给它。
曾经研究过网上的很多方法，个人觉得这个是最有效的了。
如果图片左浮动并且"display:inline"时，给图片设置一个"text-align:center"属性，就解决了水平居中。
使用display:table-cell和设置了display:inline-block的线合span，这样就解决垂直居中。
|
最新内容
相关内容
python如何使输出换行
python如何使输出换行，培训，结果，两个，方法，引号，函数，同行，以上，时候，方式，python的print()函数输出时，通常输出结果是整行显示出来的，这时候
python如何读取文件
python如何读取文件，培训，数据，文件，信息，有限，操作系统，对象，磁盘，函数，表示，读写文件前，我们先必须了解一下，在磁盘上读写文件的功能都是由操
python如何安装一个模块
python如何安装一个模块，培训，工具，模块，方式，文件夹，源码，本文，下面，以上，之后，下面介绍几种安装Python模块的几种方式easy_install方式先下
pythonid函数如何运行
pythonid函数如何运行，培训，地址，代码，对象，函数，内存，类型，可能会，整数，字符串，id(object)功能：返回的是对象的“身份证号”，唯一且不变，但在不
python如何安装pip
python如何安装pip，培训，情况，通用，工具，脚本，以下，版本，命令，以上，管理工具，pip是一个现代的，通用的Python包管理工具[1]。提供了对Python包
python如何设置编码格式
python如何设置编码格式，代码，培训，一致，声明，文件，头部，格式，注释，中文，以下，如果要在python2的py文件里面写中文，则必须要添加一行声明文件
python如何输出质数
python如何输出质数，数字，代码，培训，质数，情况，自然数，不是，循环体，素数，用户， python输出质数的方法：质数(Primenumber)，又称素数，指在大
python如何判断输入是不是数字
python如何判断输入是不是数字，数字，异常，培训，字符，表示，字符串，不是，正则，方法，字母，python判断输入是不是数字的方法：在接收raw_input方法
python如何在python导入tkinter
python如何在python导入tkinter，培训，标准，控件，应付自如，图形界面，实例，模块，以上，之后，消息，Tkinter是Python的标准GUI库。Python使用Tkint
python如何运行python
python如何运行python，代码，培训，系统，语句，模式，结果，提示符，命令，以下，文件，Python的程序运行，需要Python解释器。安装完Python在Windows或L
python如何打开文件夹
python如何打开文件夹，培训，图片，文件，方式，尾部，格式，内容，文件夹，存在，参数，python下打开文件超级简单，不用导入任何包，直接输入f=open(your_
python如何判断素数
python如何判断素数，数字，培训，情况，代码，质数，素数，自然数，不是，循环体，用户，python判断素数的方法质数(Primenumber)，又称素数，指在大于1的自