<!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. Ural 1519 Formula 1 插头DP

    这是一道经典的插头DP单回路模板题. 用最小表示法来记录连通性,由于二进制的速度,考虑使用8进制. 1.当同时存在左.上插头的时候,需要判断两插头所在连通块是否相同,若相同,只能在最后一个非障碍点相连 ...

  2. ServiceStack.OrmLite破解

    在 ServiceStack.OrmLite下的 OrmLiteConfigExtensions 第199行把这句注释掉就可以了 //LicenseUtils.AssertValidUsage(Lic ...

  3. Codeforces Round #301 (Div. 2) D. Bad Luck Island 概率DP

    D. Bad Luck Island Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/540/pr ...

  4. 探究react-native 源码的图片缓存

    先看js端图片使用的三种方式,依次排序1.2.3 <Image source={{uri:url}} style={{width:200,height:200}}/> 1. 加载远程图片 ...

  5. shell 快速移动，快捷操作

    ctr+h 往后删除一字符 ctr+d 往前删除一字符 ctr+b 光标往前 ctr+f 往后ctr+u 删除到最前 ctr+K删除到最后ctr+a 光标到最前 ctr+e 光标到最后ctr+p 往上 ...

  6. LeetCode89:Gray Code

    The gray code is a binary numeral system where two successive values differ in only one bit. Given a ...

  7. 终于理解了什么是LGPL

    GPL 我 们很熟悉的Linux就是采用了GPL.GPL协议和BSD, Apache Licence等鼓励代码重用的许可很不一样.GPL的出发点是代码的开源/免费使用和引用/修改/衍生代码的开源/免费 ...

  8. 跨域策略文件crossdomain.xml

    Web站点通过crossdomain.xml文件(放于站点根目录)配置提供允许的域跨域访问本域内容的权限 以土豆的为例: <cross-domain-policy> <allow-a ...

  9. FFmpeg YUV2RGB

    AVFrame* YUV2RGB( AVCodecContext * avctx, AVFrame * frame ) { AVFrame* pFrameRGB=NULL; pFrameRGB=avc ...

  10. [Android Memory] 使用 Eclipse Memory Analyzer 进行堆转储文件分析

    转载地址:http://www.ibm.com/developerworks/cn/opensource/os-cn-ecl-ma/index.html Eclipse Memory Analyzer ...