现在宽屏设计常见,为了适应不同的显示器,往往给div一个100%的宽度,下面再写,那么问题来了,这样的图片怎样做到在任何窗口宽度时自动居中显示?
<div class="banner">
<ul>
<li>
<img src="/attached/banner/1.jpg">
</li>
<li>
<img src="/attached/banner/2.jpg">
</li>
<li>
<img src="/attached/banner/3.jpg">
</li>
</ul>
</div>
3Q!
去看看张鑫旭大神博客,有各种居中。w3cplus上也有各种居中文章。
table-cell可以搞定。
li{list-style: none}
li{
display: table-cell;
width: 100%;
border: 1px solid red;
text-align: center;
vertical-align: middle;
}
为什么一定是图片,而不是作为背景图片呢,作为背景图片的话,background-position:center;
就解决了啊……
如果你是要做很多动画效果的话,那就再议了,或许也可以用背景图片的方式,就是看其他动画的元素怎么去定义位置了。
<div>
<img src="" />
</div>
CSS
div{
position:relative;
width:100%;
}
div img{
position:absolute;
right:0;
left:0;
margin:auto;
}
w3cplus的文章:[居中之美](http://www.w3cplus.com/collective-5.html)
我也来一个
.juzhong{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
<div>
<img src="" />
</div>
CSS
div{
position:relative;
width:100%;
}
div img{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
max-width:100%;
}
或许你可以试试这样子写
给div加上text-align:center 不是就可以居中了吗
方法1, img中设置样式 <img src="xxx" style="display: block; margin: 0px auto; vertical-align: middle;">
方法2, div中设置样式 <div style="text-align:center;">
... 其实有很多种方法
可以设置图片object-position: contain~~
div 用 text-align:center;
然后img用 margin:0 auto;注意的是后面那个auto,前面那个0自定义
绝对定位left:50%
然后再用margin-left图片宽度的一半
盒模型 so easy
是垂直并且水平居中把,解决方案需要css + js
简单css的水平垂直居中
还记得当年的固定大小的任意元素垂直居中于父元素吗?
<div id="father">
<div id="son"></div>
</div>
#father{
width:100%;
height:100%;
position:relative;//父相对
}
#son{
width:400px;
height:200px;
position:absolute;
top:50%;
left:50%;
/*关键:让点回去*/
margin-left: -200px;
margin-top: -100px;
}
复杂的但是原理一样
这里如果son的宽高不固定怎么办?不知道这是不是题主要问的。
css的代码需要去掉margin,然后使用js获取。
<div id="father">
<div id="son"></div>
</div>
#father{
width:100%;
height:100%;
position:relative;//父相对
}
#son{
width:400px;
height:200px;
position:absolute;
top:50%;
left:50%;
/*去掉这里,使用js获取
margin-left: -200px;
margin-top: -100px;
*/
}
js代码
$(function(){
var height = $("#son").width();
var height = $("#son").height();
$("#son").attr("margin-top",(-height/2)+"px");
$("#son").attr("margin-left",(-width/2)+"px");
});
特别提醒
如果你的son是一个image,您需要延迟执行上面的代码,因为获取到的图片长宽需要等待图片下载完成后再来计算
代码如下
<div id="father">
<img id="son" src="http://XXXX.jpg" />
</div>
css代码不变,js代码如下
$(function(){
$("#son").on("load",function(){
/*这里的图片获取长宽不再是这个样子的,需要修改*/
//var height = $("#son").width();
//var height = $("#son").height();
/*请自己查找把。*/
$("#son").attr("margin-top",(-height/2)+"px");
$("#son").attr("margin-left",(-width/2)+"px");
})
});
提示
如果是图片。请自行查找如何获取图片的原始大小
在大屏幕(父容器的宽度大于图片宽度)中,图片居中需要的代码如下: (父容器用li代替)
css
li { text-align: center; } img { margin: 0 auto; }
以下针对父容器不够宽时,只写添加的代码
- 缩放图片,但保持图片的高宽比
css
img { max-width: 100%; }
- 不缩放图片,而是对图片进行裁剪,裁剪保留区域为图片中部,以下只写了水平方向,垂直方向同理
css
li { margin-left: 50%; overflow: hidden; } img { margin-left: -1/2 * width; /* 图片本身尺寸的一半 */ }
注:如果是这种情况,建议将图片作为背景,然后利用背景的裁剪方式比较好。
以上,如果都不是楼主想要的,请再把你的问题描述清楚些。另外,如果只是要水平垂直居中的话,添加的代码如下
css
li { font-size: 0; } li * { font-size: 1rem; /* 这个你用px也可以,但是不能使用em或是百分比 */ } li::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; width: 0; } img { vertical-align: middle; display: inline-block; }
无需使用脚本,对宽度未知的img也适用。
补充一点 不需要给元素设置宽度100% 默认块级元素就是100%的