<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>图片水平垂直居中</title>

<style type="text/css">

 ul{ list-style:none outside none;}

.sjk li{float:left; margin-right:13px;}

.sjk li div{display:table-cell; width:144px; height:144px; border:1px solid #beceeb; font-size:126px; text-align:center; vertical-align:middle;}

.sjk li div img{vertical-align:middle;}

</style>

</head>

<body>

<ul class="sjk fix">

         <li><div><img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /></div> </li>

        <li><div><img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /></div> </li>

        <li><div><img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /></div> </li>

</ul>

</body>

</html>

地址：

css实现图片水平垂直居中的更多相关文章

  1. CSS制作图片水平垂直居中

    所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...

  2. CSS制作图片水平垂直居中 亲测推荐

    空白标签实现图片的垂直居中 这种方法很有意思,也很有独特之处,我的思路也是来自于张鑫旭-鑫空间-鑫生活写的<大小不固定的图片.多行文字的水平垂直居中>一文中的使用空白图片实现垂直对齐.他主 ...

  3. CSS中图片水平垂直居中方法小结

    写页面时难免会遇到水平垂直居中的问题,总结一下最近使用的方法. 一.使用垂直居中和水平居中 <div id="div1"> <img src="img/ ...

  4. css 使图片水平垂直居中

    1.利用display:table-cell,具体代码如下: html代码如下: <div class="img_wrap"> <img src="wg ...

  5. 纯CSS实现图片水平垂直居中于DIV（图片未知宽高）

    <div class="demo"><a href="#"><img src="http://nec.netease.c ...

  6. 图片水平垂直居中（兼容IE6，IE7，firefox，opera，safari，其中图片可以是任何块元素）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Flexbox制作CSS布局实现水平垂直居中

    Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  & ...

  8. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  9. 【最全】CSS盒子(div)水平垂直居中居然还有这种方式

    最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...

随机推荐

  1. JavaScript设计模式与开发实践——读书笔记1.高阶函数(下)

    上部分主要介绍高阶函数的常见形式,本部分将着重介绍高阶函数的高级应用. 1.currying currying指的是函数柯里化,又称部分求值.一个currying的函数会先接受一些参数,但不立即求值, ...

  2. HDU 5641 King's Phone 模拟

    King's Phone 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5641 Description In a military parade, ...

  3. Bayesian Face Revisited A Joint Formulation

    很有意思的一篇人脸识别算法文章,人家写的太好,就不好意思写了,收集了一些资料,包括了原理介绍,流程图,项目网址和作者主页信息等. 参考资料: [1]. http://blog.csdn.net/csy ...

  4. MSChart使用小结

        在用到图表展示某项.多项信息的统计情况,很正常联想到MSChart控件.        以VS2008开发为例,在工具箱也中右击,选择”choose items“,打开对话框,选择COM组件T ...

  5. 蓝屏代码详解（更新WIN7蓝屏代码）

    6位代码含意 0 0x0000 作业完成.  1 0x0001 不正确的函数.  2 0x0002 系统找不到指定的档案.  3 0x0003 系统找不到指定的路径.  4 0x0004 系统无法开启 ...

  6. object-c的异常处理机制

    转载请注明:http://blog.sina.com.cn/s/blog_69081e060100utl5.html   一直听说iOS有异常处理机制,却从来没有关系过,今天小生就来关心下iOS的异常 ...

  7. Tasker 正则表达式测试器

    http://tieba.baidu.com/p/3533498043 本次分享的是一个正则表达式测试工具,用来方便快捷的进行Tasker正则方面的测试,一些比较复杂的匹配需要进行多次尝试才可能正确匹 ...

  8. Openfire更服务器名称后报Found RSA certificate that is not valid for the server domain的解决方法

    原文:http://blog.sina.com.cn/s/blog_ae5a3d3f0102wdrb.html Openfire更服务器名称的方法: 1.登陆openfire管理页面,在主页面下方选择 ...

  9. Win10系统中新增的快捷键，做个记录

    Win10系统中新增的快捷键,做个记录 1.Win+Q或者Win+S 打开下面搜索框                                2.Win+T 切换任务栏上程序:   3.Win+ ...

  10. QT 异步函数转为同步函数的方法

    在QT中,一般推荐使用异步函数.除了异步函数的非阻塞特性外,QT的Signal/Slot特性在异步函数中可以得到充分的发挥.因此,在QT中,很多API的设计都是使用非阻塞的异步函数作为API,然后执行 ...