<!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. 第2篇--JVM的内存区域划分

    学过C语言的朋友都知道C编译器在划分内存区域的时候经常将管理的区域划分为数据段和代码段,数据段包括堆.栈以及静态数据区.那么在Java语言当中,内存又是如何划分的呢? 由于Java程序是交由JVM执行 ...

  2. Google Code Jam 2010 Round 1C Problem A. Rope Intranet

    Google Code Jam 2010 Round 1C Problem A. Rope Intranet https://code.google.com/codejam/contest/61910 ...

  3. OpenVPN Server端配置文件详细说明（转）

    本文将介绍如何配置OpenVPN服务器端的配置文件.在Windows系统中,该配置文件一般叫做server.ovpn:在Linux/BSD系统中,该配置文件一般叫做server.conf.虽然配置文件 ...

  4. Linux下Shell命令的输出信息同时显示在屏幕和保存到日志文件中

    #直接覆盖日志文件 ls -l | tee ./t.log #将输出内容附加到日志文件 ls -l | tee -a ./t.log 使用的是tee命令

  5. java中的容器解释

    解释一:容器(Container)Spring 提供容器功能,容器可以管理对象的生命周期.对象与对象之间的依赖关系,您可以使用一个配置文件(通常是XML),在上面定义好对象的名称.如何产生(Proto ...

  6. UVa 637 - Booklet Printing

    题目:模拟输出n页书的装订打印状态. 分析:模拟.页数为(n+3)/ 4,仅仅有n不超过半篇时会输出半篇. 说明:好多曾经做过的题目(⊙_⊙). #include <cstdlib> #i ...

  7. Java ClassLoader加载机制理解

    今天看到了一篇介绍Java ClassLoader加载机器的文章, 才发觉一直来自己的肤浅, 好好地给补了一课, 不得不存档! 原文地址: http://www.blogjava.net/lhulcn ...

  8. linux创建swap分区

    创建交换分区 root@zabbix-server:~# mkdir /swap root@zabbix-server:~# cd /swap/ root@zabbix-server:/swap# l ...

  9. 惠普HP compaq康柏系列 CQ40笔记本电脑拆机除尘

    工具:两用螺丝刀(一字口的拆CPU,十字口的拆其它所有螺丝)    散热硅胶和CPU上的散热贴 正面照(A面) 反面照(D面) 第一步:拆掉电池,不要忘记了红圈这里的两颗螺丝.共6颗小螺丝. 第二步: ...

  10. iOS：搜索栏控件UISearchBar and SearchDisplayController的使用

    UISearchBar and SearchDisplayController控件: 这是一个带搜索栏和搜索显示控制器的控件,前面的SearchBar是一个搜索栏,它提供一个输入搜索条件的类似于文本框 ...