方法一：通过增加100%高度行内块居中对齐

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title></title>

    <style type="text/css">

        div{

            width: 600px;

            height: 220px;

            text-align: center;

            border: 1px solid red;

        }

        span{

            height: 100%;

            display: inline-block;

            vertical-align: middle;

        }

        img{

            vertical-align: middle;

        }

    </style>

</head>

<body>

    <div>

        <span></span><img src="demo.jpg">

    </div>

</body>

</html>

方法二：通过table/table-cell样式居中

<!DOCTYPE html>

<html>

<head>

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

    <meta name="viewport" content="width=device-width" />

    <title></title>

    <style type="text/css">

        div{

            width: 600px;

            height: 220px;

            text-align: center;

            border: 1px solid red;

            display: table;

        }

        span{

            display: table-cell;

            vertical-align: middle;

        }

        img{

            vertical-align: middle;

        }

    </style>

</head>

<body>

    <div class="container">

        <span><img src="demo.jpg"></span>

    </div>

</body>

</html>

方法三：设置为背景图片居中

<!DOCTYPE html>

<html>

<head>

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

    <meta name="viewport" content="width=device-width" />

    <title></title>

    <style type="text/css">

        div{

            width: 600px;

            height: 220px;

            text-align: center;

            border: 1px solid red;

            background-image: url('demo.jpg');

            background-repeat: no-repeat;

            background-position: center;

        }

    </style>

</head>

<body>

    <div>

    </div>

</body>

</html>

CSS-布局【1】-图片在div中垂直居中的更多相关文章

  1. 尺寸不固定的图片在div中垂直居中并完全显示

    前几天做一个项目,需要批量上传图片,图片外侧div尺寸固定:由于图片是用户输入的,所以大小存在不确定性,产品需求是无论图片尺寸多大,都要垂直居中完全显示 废话不多说,直接上代码 html <ul ...

  2. 让图片在DIV中垂直居中

    window.onload=function(){ var img = document.getElementById("imgdiv"); var div = document. ...

  3. 单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中

    单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中   <div class="ServicesLiTopPic"> <i>&l ...

  4. CSS布局总结及实际应用中产生的问题

    布局初步 所谓布局,其实是指的将网页内容以一定的方式放到合适的位置上去. 布局的基本步骤: 1, 将“当前版面”以视觉上界限明显的方式进行划分若干个区块,划分只用两种方式: a) 上下结构:此时,只要 ...

  5. 未知行数的文字在div中垂直居中

    今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图: 图1 图2 图3 图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,ht ...

  6. 设置span在div中垂直居中

    转自:https://blog.csdn.net/weirenkuan/article/details/51177695 使用display:table-cell,span中内容无论多少,都可以垂直居 ...

  7. 随机图片大小在DIV中垂直居中对齐总结

    老遇到这种样式 现在总结一下 <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type&quo ...

  8. 让图片在div 中居中的方法

    方法一: 思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中. 结构如下: <div> <img src="images/tt ...

  9. 未知高度的图片在div设置垂直居中

    方法一: 该方法是将外部容器的显示模式设置成display:table,img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样就可以很方便的使用ve ...

随机推荐

  1. java Class<?>和Class<T>等

    E - Element (在集合中使用,因为集合中存放的是元素) T - Type(Java 类) K - Key(键) V - Value(值) N - Number(数值类型) ? - 表示不确定 ...

  2. Mysql undo与redo Log

    http://mysql.taobao.org/monthly/2015/04/01/ http://www.cnblogs.com/Bozh/archive/2013/03/18/2966494.h ...

  3. android bitmap的放大缩小

    private static Bitmap big(Bitmap bitmap) { Matrix matrix = new Matrix(); matrix.postScale(1.5f,1.5f) ...

  4. Enter password for default keyring to unlock

    file /home/ok/.gnome2/keyrings/login.keyring /home/ok/.gnome2/keyrings/login.keyring: GNOME keyring, ...

  5. .net学习之Attribute特性和EF关键知识点

    一.Attribute特性/标签1.Attribute用来对类.属性.方法等标注额外的信息,贴一个标签简单的说,定制特性Attribute,本质上就是一个类,它为目标元素提供关联附加信息,并在运行时以 ...

  6. 【JAVA IO流之字符流】

    一.概述. java对数据的操作是通过流的方式.java用于操作流的对象都在IO包中.流按照操作数据不同分为两种,字节流和字符流.流按照流向分为输入流,输出流. 输入输出的“入”和“出”是相当于内存来 ...

  7. NPOI读写Excel

    1.整个Excel表格叫做工作表:WorkBook(工作薄),包含的叫页(工作表):Sheet:行:Row:单元格Cell. 2.NPOI是POI的C#版本,NPOI的行和列的index都是从0开始 ...

  8. C#在后台运行操作：BackgroundWorker的用法

    在我们的程序中,经常会有一些耗时较长的运算,为了保证用户体验,不引起界面不响应,我们一般会采用多线程操作,让耗时操作在后台完成,完成后再进行处理或给出提示,在运行中,也会时时去刷新界面上的进度条等显示 ...

  9. Cube Processing Options

    在 Microsoft SQL Server Analysis Services 中处理对象时,您可以选择处理选项以控制每个对象的处理类型.  处理类型因对象而异,并基于自上次处理对象后对象所发生的更 ...

  10. python生成RSS（PyRSS2Gen）

    既然能够用python解析rss,那么也顺带研究下生成rss. 其实很简单,只是生成一个比较特殊点的xml文档而已. 这里我使用了PyRss2Gen,用法很简单,看代码就知道了,如下: import ...