石家庄做网站,石家庄网站优化,石家庄网络推广,石家庄网络公司
当前位置:主页 > 新闻资讯 > 建站经验 >

CSS让图片垂直居中的几种技巧

发表日期:2019-12-27 14:00文章编辑:建站教程浏览次数: 标签: css教程|建站教程|    

网页设计过程中,有时候会希望图片垂直居中的情况。而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战。下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标准浏览器外,另外两种方法的兼容性还不错。
 
方法一
将外部容器的显示模式设置成display:table,这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样span内部的内容就相当于表格,可以很方便的使用vertical-align属性来对齐其中的内容了。
 
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 
    <title>方法1 - 未知高度的图片垂直居中 - </title>
 
<style type="text/css">
 
body {
 
    height:100%;
 
}
 
#box{
 
    width:500px;height:400px;
 
    display:table;
 
    text-align:center;
 
    border:1px solid #d3d3d3;background:#fff;
}
 
#box span{
 
    display:table-cell;
 
    vertical-align:middle;
}
 
#box img{
 
    border:1px solid #ccc;
 
}
 
</style>
 
<!--[if lte IE 7]>
 
<style type="text/css">?
#box{
 
    position:relative;
 
    overflow:hidden;
 
}
#box span{
    position:absolute;
 
    left:50%;top:50%;
 
}
 
#box img{
 
    position:relative;
 
    left:-50%;top:-50%;
}
 
</style>
 
<![endif]-->
 
 
 
</head>
 
 
 
<body>
 
<div id="box">
 
    <span><img src="images/demo_zl.png"  /></span>
 
</div>
 
 
 
</body>
 
</html>
方法二
标准浏览器的情况还是和上面一样,不同的是针对IE6/IE7利用在img标签的前面插入一对空标签的办法。
 
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 
    <title>方法2 - 未知高度的图片垂直居中 - </title>
 
 
 
<style type="text/css">
 
body {
 
    height:100%;
}
 
#box{
 
width:500px;height:400px;
display:table-cell;
 
text-align:center;
 
vertical-align:middle;
 
border:1px solid #d3d3d3;background:#fff;
 
}
 
#box img{
 
border:1px solid #ccc;
 
}
 
</style>
 
<!--[if IE]>
<style type="text/css">?
 
#box i {
 
    display:inline-block;
    height:100%;
 
    vertical-align:middle
 
    }
 
#box img {
 
    vertical-align:middle
 
    }
 
</style>
<![endif]-->
 
 
 
 
 
 
</head>
 
 
 
<body>
 
<div id="box">
 
    <i></i><img src="images/demo_zl.png"  />
 
</div>
 
 
 
 
</body>
</html>
方法三
在img标签外包裹一个p标签,标准浏览器利用p标签的伪类属性:before来实现居中,另外,对于IE6/IE7使用了CSS表达式来实现兼容。
 
view source
print?
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 
    <title>方法3 - 未知高度的图片垂直居中 - </title>
 
 
 
<style type="text/css">
 
body {
 
    height:100%;
 
}
 
#box{
 
    width:500px;height:400px;
 
    text-align:center;
    border:1px solid #d3d3d3;background:#fff;
 
}
 
#box p{
 
    width:500px;height:400px;
 
    line-height:400px;  /* 行高等于高度 */
 
}
 
 
 
/* 兼容标准浏览器 */
 
#box p:before{
 
    content:".";  /* 具体的值与垂直居中无关,尽可能的节省字符 */
 
    margin-left:-5px; font-size:10px;  /* 修复居中的小BUG */
 
    visibility:hidden;  /*设置成隐藏元素*/
 
}
 
 
 
#box p img{
 
    *margin-top:expression((400 - this.height )/2);  /* CSS表达式用来兼容IE6/IE7 */
 
    vertical-align:middle;
 
    border:1px solid #ccc;
 
}
 
</style>
 
 
</head>
 
 
 
<body>
<div id="box">
 
    <p><img src="images/demo_zl.png"  /></p>
 
</div>
 
 
 
</body>
 
</html>

如没特殊注明,文章均来自网络!转载请注明来自:https://www.yousouke.com/News/jzjy/743.html

网站设计案例推荐

热门新闻

「石家庄网站建设」企业建网站如何提高网页打开速度

手机网站建设技巧及推广方法

「不等于符号」sql 不等于符号

服务器返回的http状态码

做好站内优化的重要性有哪些?

phpcms显示验证码出错怎么办?

CSS解决文字与图片不能水平居中对齐的问题

网站运营推广中哪些问题常常会遇到?

相关新闻

织梦dede任意模板调用全站随机文章

dede织梦 {dede:channelartlist}标签栏目序号调用方法

dede织梦"关键字不能小于2个字节"解决办法

dedecms采集过滤规则及替换规则

几种常见的JS操作CSS的方法

margin和padding属性不起作用的原因

推荐新闻

网站取消备案和注销备案到底有什么区别?

企业网站建设中有哪几个重要点?

超链接去掉下划线的几个方法

【seo优化公司】快速提升网站权重的几个方法?

石家庄网站关键词优化之网站词库企业关键词的建立

石家庄SEO:PR值是什么意思?

404页面对SEO优化影响有多大?

学校网站建设方案里面主要包含哪些内容呢?

网页加载缓慢怎么办?