<!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. Java基础学习——多线程之创建任务

    这次来盘点一下Java中用线程执行任务的写法. 1.扩展Thread 最基本的实现方法是在创建一个继承Thread的新类,在其中覆盖run()方法执行任务. public class MyThread ...

  2. C# winform 禁止窗体移动

    #region 禁止窗体移动 public const int WM_SYSCOMMAND = 0x112; public const int SC_MOVE = 0xF012; protected ...

  3. CentOS 7安装ifconfig

    yum install net-tools 安装这个工具,或者升级写法,使用ip addr show 参考: https://linux.cn/article-3631-1.html

  4. SharePoint 2013 排错之&quot;Code blocks are not allowed in this file&quot;

    今天,设置页面布局的自己定义母版页时,设置完了以后保存,然后预览报错,错误例如以下截图:删掉自己定义母版页的MasterPageFile属性,页面依旧报错:感觉甚是奇怪,由于有版本号控制,还原为最初的 ...

  5. RTL8188EUS带天线的WiFi模块

    http://www.liuliutech.com/ProductShow.asp?ID=121 一,公司介绍瑞昱(REALTEK)半导体成立于1987年,位于台湾[硅谷]的新竹科学园区.凭借着7位创 ...

  6. springMvc的一些简介 和基于xml的handlerMapping基本流程

    其它步骤就不在介绍了 在大多数情况,都会使用基于annotation的方式进行HandlerMapping处理,在这里基于对这个流程的了解,就采用了基于xml配置了一个HandlerMapping & ...

  7. Android中MVC模型（复合模式）

    mvc是model,view,controller的缩写,mvc包括三个部分: 1.模型(model)对象:是应用程序的主体部分,全部的业务逻辑都应该写在该层. 2.视图(view)对象:是应用程序中 ...

  8. windows系统上安装与使用Android NDK r8d(二)

    四.    在eclipse中集成c/c++开发环境    1. 装Eclipse的C/C++环境插件:CDT,这里选择在线安装.          首先登录http://www.eclipse.or ...

  9. jquery css 主菜单样式的跳转

    想要实现的效果事实上是挺常见的那种:网页的主菜单一開始有一种默认的样式(如A样式),当鼠标经过某一菜单项时.此菜单项会套用一种样式(如B样式),当鼠标点击某一菜单项时.当前菜单项会套用B样式,其余菜单 ...

  10. 【转载】Java并发编程：volatile关键字解析 by 海子

    volatile这个关键字可能很多朋友都听说过,或许也都用过.在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果.在Java 5之后,volatile关键字才得以 ...