精华内容
下载资源
问答
  • 1.flex布局 /*你的父容器*/ .box{ display:flex; align-items: center;//子元素垂直居中 justify-content: center;//子元素水平居中 }2.table布局 .box{ display:table; vertical-alian:middle;

    1.flex布局

    /*你的父容器*/
     .box{
            display:flex;
            align-items: center;//子元素垂直居中
            justify-content: center;//子元素水平居中
    }
    2.table布局

     .box{
            display:table;
           vertical-alian:middle;
    }
    转自:https://segmentfault.com/q/1010000010967267


    展开全文
  • 图片在div中默认是和基线对齐(从上到下依次是顶线(top),中线(middle),基线(baseline),底线(bottom)) 方法: 给div设定text-align:center;可使图片水平居中,再给图片img设定 vertical-align:middle;...

    图片在div中默认是和基线对齐(从上到下依次是顶线(top),中线(middle),基线(baseline),底线(bottom))
    方法:
    给div设定text-align:center;可使图片水平居中,再给图片img设定 vertical-align:middle;即可达到垂直居中(切记,是给图片加,不是div,很多人容易搞错
    还有一个方法,就是用table布局,td默认是水平方向居左的,但是垂直方向是居中的,所以你套一个table后再插入图片的话,也能很好的达到垂直居中

    展开全文
  • 该方法是将外部容器的显示模式设置成display:table,img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样就可以很方便的使用vertical-align象表格元素那样对齐了,当然这只是标准...
    方法一:
    
    该方法是将外部容器的显示模式设置成display:table,img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样就可以很方便的使用vertical-align象表格元素那样对齐了,当然这只是在标准浏览器下,IE6/IE7还得使用定位。
    HTML代码
    <div id="box">
    <span><img src="images/demo.jpg" alt="" /></span>

    </div>

    CSS代码
    <style type="text/css">
    #box{
        width:500px;height:400px;
        display:table;
        text-align:center;
        border:1px solid #d3d3d3;background:#fff;
    }
    #box span{
        display:table-cell;
        vertical-align:middle;
    }
    #box img{
        border:1px solid #ccc;
    }
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    #box{
        position:relative;
        overflow:hidden;
    }
    #box span{
        position:absolute;
        left:50%;top:50%;
    }
    #box img{
        position:relative;
        left:-50%;top:-50%;
    }
    </style>
    <![endif]-->

    方法二:
    方法二和方法一的实现的原理大同小异,结构也是相同的,方法一用的是条件注释,方法二就用的CSS Hack。
    CSS代码
    <style type="text/css">
    #box{
        width:500px;height:400px;
        overflow:hidden;
        position:relative;
        display:table-cell;
        text-align:center;
        vertical-align:middle;
        border:1px solid #d3d3d3;background:#fff;
    }
    #box span{
        position:static;
        *position:absolute; /*针对IE6/7的Hack*/
        top:50%; /*针对IE6/7的Hack*/
    }
    #box img {
        position:static;
        *position:relative; /*针对IE6/7的Hack*/
        top:-50%;left:-50%; /*针对IE6/7的Hack*/
        border:1px solid #ccc;
    }
    </style>
    该方法有个弊端,在标准浏览器下由于外部容器#box的显示模式为display:table-cell,所以导致#box无法使用margin属性,并且在IE8下设置边框也无效。


    方法三:
    标准浏览器还是将外部容器#box的显示模式设置为display:table-cell,IE6/IE7是利用在img标签的前面插入一对空标签的办法。
    HTML代码
    <div id="box">
        <i></i><img src="images/demo.jpg" alt="" />
    </div>
    CSS代码
    <style type="text/css">
    #box{
    width:500px;height:400px;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    border:1px solid #d3d3d3;background:#fff;
    }
    #box img{
    border:1px solid #ccc;
    }
    </style>
    <!--[if IE]>
    <style type="text/css">
    #box i {
        display:inline-block;
        height:100%;
        vertical-align:middle
        }
    #box img {
        vertical-align:middle
        }
    </style>

    <![endif]-->


    方法四:
    在img标签外包裹一个p标签,标准浏览器利用p标签的伪类属性:before来实现,IE6/IE7使用了CSS表达式来实现兼容。
    HTML代码
    <div id="box">
        <p><img src="images/demo.jpg" alt="" /></p>
    </div>
    CSS代码
    #box{
        width:500px;height:400px;
        text-align:center;
        border:1px solid #d3d3d3;background:#fff;
    }
    #box p{
        width:500px;height:400px;
        line-height:400px; /* 行高等于高度 */
    }
      
    /* 兼容标准浏览器 */
    #box p:before{
        content:"."; /* <a href="http://casinogreece.gr/">????????????</a> 具体的值与垂直居中无关,尽可能的节省字符 */
        margin-left:-5px; font-size:10px; /* 修复居中的小BUG */
        visibility:hidden; /*设置成隐藏元素*/
    }
      
    #box p img{
        *margin-top:expression((400 - this.height )/2); /* CSS表达式用来兼容IE6/IE7 */
        vertical-align:middle;
        border:1px solid #ccc;
    }
    使用:beforr这个方法对于标准浏览器来说比较给力,也没发现有副作用,但是对于IE6/IE7,如果对性能要求较高的话CSS表达式的方法要慎用。


    方法五:
    该方法针对IE6/IE7,将图片外部容器的字体大小设置成高度的0.873倍就可以实现居中,标准浏览器还是使用上面的方法来实现兼容,并且结构也是比较优雅。
    HTML代码
    <div id="box">
        <img src="images/demo.jpg" alt="" />
    </div>
    CSS代码
    #box{
        width:500px;height:400px;
        text-align:center;
        border:1px solid #d3d3d3;background:#fff;
        
        /* 兼容标准浏览器 */
        display: table-cell;
     vertical-align:middle;
        
        /* 兼容IE6/IE7 */
        *display:block;
        *font-size:349px; /* 字体大小约为容器高度的0.873倍 400*0.873 = 349 */
        *font-family:Arial; /* 防止非utf-8引起的hack失效问题,如gbk编码 */
    }
     
    #box img{
        vertical-align:middle;
    }
    设置字体大小的方法感觉比较怪异,也没有看到一个合理的解释,只知道图片元素有一些不同于其他元素的特性,但是对于IE6/IE7来说,这个方法还是比较给力的。
    思考:很多方法都是依赖于将外部容器的显示模式设置成table才能实现垂直居中,也就是div来模拟table。
    展开全文
  • div相对与table对于图片垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法: 曾经的 淘宝UED 招聘 有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px...
  • 当然也可以用下面的方法下面说两种屏幕正中(水平居中+垂直居中)的方法 放上示范的html代码:&amp;lt;body&amp;gt; &amp;lt;div class=&amp;quot;main&amp;quot;&amp;gt;

    最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。
    水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法

    下面说两种在屏幕正中(水平居中+垂直居中)的方法
    放上示范的html代码:

    <body>
    	<div class="main">
    		<h1>MAIN</h1>
    	</div>
    </body>
    
    • 方法一:

    div使用绝对布局,设置margin:auto;并设置top、left、right、bottom的值相等即可,不一定要都是0。

    .main{
    	text-align: center; /*让div内部文字居中*/
    	background-color: #fff;
    	border-radius: 20px;
    	width: 300px;
    	height: 350px;
    	margin: auto;
    	position: absolute;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    }
    

    效果如图:
    这里写图片描述

    • 方法二:
      仍然是绝对布局,让left和top都是50%,这在水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了,效果图和上方相同。
     .main{
    	text-align: center;
    	background-color: #fff;
    	border-radius: 20px;
    	width: 300px;
    	height: 350px;
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	transform: translate(-50%,-50%);
    }
    
    • 方法三:
      对于水平居中,可以使用最简单的<center>标签,不过已经过时了,用法如下:
    <p><center>123</center></p>
    

    这个<center>标签就是相对于<p>标签里的文字,可以使其居中。

    由于center标签已经过时了,所以正规一点的话还是不建议使用的,可以使用如下的方式代替:

    <p style="text-align:center;">123</p>
    


    欢迎大家加入QQ群一起交流讨论, 「吟游」程序人生——YinyouPoet
    展开全文
  • 外层div,内层img,如何img在div内水平垂直居中展示呢? 上面已经实现了图片在div中水平垂直居中展示了,那下面就是如何隐藏掉图片超出div的部分:
  • 纯CSS 图片在DIV中垂直居中的显示方法
  • css,网页常见功能,图片div垂直水平居中
  • 昨夜与群友讨论图片垂直居中时,突然想到与这很相像的DIV垂直居中效果.raozou分享了他的效果代码,今将其整理,特贴下来大家一起分享
  • 下面小编就为大家带来一篇不定宽高的文字在div中垂直居中实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • .box { display:flex; align-items: center }
  • CSS 图片在DIV中垂直居中的显示方法

    千次阅读 2016-12-15 15:15:56
    如果我想要class="img404"的imgclass="wall"的div里面垂直居中,我可以在div里面加一个span空标签,把它的高度设为100%,再给它一个vertical-align:middle样式,同样地给img一个vertical-align:middle样式,那么...
  • 元素在div中垂直居中的三种方式

    千次阅读 2017-07-19 11:36:09
    对于文字的垂直居中相当简单,只需要设置外层div的height与line-height值相等即可,但是此样式却不适用于div,img,p等元素的居中,下面是解决办法: 一、已知父级div宽高 使父级div显示为表格单元格,通过设置...
  • 先设置行高 line-height:40px;//令行高等于div 的height,保证一行文字垂直居中 再令 text-align:center;
  • 如何ul在div中垂直居中

    万次阅读 2016-06-30 10:29:04
    将父级div的display设置为table-cell vertical-align设置为middle
  • input输入框在div中垂直居中

    千次阅读 2019-11-26 12:31:14
    <style>...#searchDiv{ height:30px; line-height:30px; background:#69C; } .d1{margin-top:4px;} </style> <divid="searchDiv"> <inputclass="d1"type="text"...
  • 纯CSS如何让图片以及DIV垂直居中显示? 转载自https://www.xuebuyuan.com/2867624.html 图片,也就是img标签,行内元素;div,块级元素。 有时候我们会纠结于如何这两种元素父容器DIV垂直居中显示(当然 ,...
  • 1、text-align:center实现图片水平居中text-align一般用于文本的水平居中,也可以用于图片,代码...}HTML部分:效果图:图片垂直居中1.jpg2、line-height和text-align:center实现图片的水平垂直居中设置line-heigh...
  • 让图片在div盒子水平垂直居中

    千次阅读 2018-06-19 22:06:00
    //调整多张图片让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img");//找到img标签外面的class 名为img的div盒子 for (let i = 0; i < imgDiv.length; i++){ /...
  • 长文本文本在div中垂直居中

    千次阅读 2018-09-29 16:21:42
    单行文本垂直居中直接使用: line-height: 10px; 但是如果多行用这个会造成样式混乱,若要匹配多行,则在div和p标签直接添加一层div &lt;div class="a"&gt; &lt;div class="b"...
  • 该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.
  • DIV 垂直居中

    2011-11-14 21:41:36
    DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 54,109
精华内容 21,643
关键字:

如何让图片在div中垂直居中