<!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. Yii单元测试 codeception-Fixture的使用

    Fixture 本文主要是介绍关于Fixture,Specify的使用和遇到的坑 部分是根据源码摸索,有差错的部分望指出 Fixture主要是用来提供测试环境下的数据特定的状态 例如:测试中需要一条待 ...

  2. 53.FIB词链

    时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master 题解 题目描述 Description Fibonacci词定义如下:FIB1 = b  FIB2 = a 当k  ...

  3. bzoj2938 病毒

    Description 二进制病毒审查委员会最近发现了如下的规律:某些确定的二进制串是病毒的代码.如果某段代码中不存在任何一段病毒代码,那么我们就称这段代码是安全的.现在委员会已经找出了所有的病毒代码 ...

  4. ACM -- 算法小结（九）DP之Humble numbers

         DP -- Humble numbers  //一开始理解错题意了,题意是是说一些只有唯一一个质因数(质因数只包括2,3,5,7)组成的数组,请找出第n个数是多少 //无疑,先打表,否则果断 ...

  5. ACM -- 算法小结（二）错排公式的应用

    pala提出的问题: 十本不同的书放在书架上.现重新摆放,使每本书都不在原来放的位置.有几种摆法?  这个问题推广一下,就是错排问题: n个有序的元素应有n!种不同的排列.如若一个排列式的所有的元素都 ...

  6. python gensim的第一次试用

    参考于 http://blog.csdn.net/xiaoquantouer/article/details/53583980 有一个地方很重要,一定要安装anaconda,安装库简直不要太方便. 先 ...

  7. ArcGIS for Android 点击选择

    public void onSingleTap(float arg0, float arg1) { //selFeatureLayer.selectFeature(5); Point p = mMap ...

  8. 【javaw.exe 两个】启动了两个javaw.exe 相关

    大家开发 肯定见过 两条并存的现象吧! 关闭方式1: 在任务管理器中,挑选 内存占用较小的 那个  关闭即可!! 关闭方式2: 1.查找对应的端口占用的进程:netstat  -aon|findstr ...

  9. Netty框架

    Netty框架新版本号:3.0.2.GA,于2008年11月19日公布.Netty项目致力于提供一个异步的.事件驱动的网络应用框架和工具,用于高速开发可维护的.高性能的.高扩展性的server和cli ...

  10. Java Collection 简介

    转自:http://skyuck.iteye.com/blog/526358 在 Java2中,有一套设计优良的接口和类组成了Java集合框架Collection,使程序员操作成批的数据或对象元素极为 ...