精华内容
下载资源
问答
  • 该方法是将外部容器的显示模式设置成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 里的padding margin ...在div里加一个table的表格,用表格的属性是在表格里的图片实现居中。 其中 [color=red]align[/color] 是水平对齐方式。[color=red]valign[/color] 是水平对...
    在使图片完全居中于框内,采用div 里的padding margin 属性是无法保证100%的居中的 
    可采用以下方法:
    [color=green]<div class="picturead"><table height="100%" align="center" valign="middle">
    <tr><td>
    <img src="images/picture.png"></img></td></tr></table></div>
    [/color]
    在div里加一个table的表格,用表格的属性是在表格里的图片实现居中。
    其中 [color=red]align[/color] 是水平对齐方式。[color=red]valign[/color] 是水平对齐方式。
    展开全文
  • 外层div,内层img,如何让img在div内水平垂直居中展示呢? 上面已经实现了图片在div中水平垂直居中展示了,那下面就是如何隐藏掉图片超出div的部分:

    外层div,内层img,如何让img在div内水平垂直居中展示呢?

     

     

     

     

    上面已经实现了图片在div中水平垂直居中展示了,那下面就是如何隐藏掉图片超出div的部分:

     

     

    展开全文
  • 有时候我们会纠结于如何让这两种元素父容器DIV中垂直居中显示(当然 ,这里我们抛开表格布局不谈,因为表格可以让内容自动垂直居中)   1. 对于图片,如下所示:     .container{ ...

    纯CSS如何让图片以及DIV垂直居中显示?

    转载自https://www.xuebuyuan.com/2867624.html

    图片,也就是img标签,行内元素;div,块级元素。

    有时候我们会纠结于如何让这两种元素在父容器DIV中垂直居中显示(当然 ,这里我们抛开表格布局不谈,因为表格可以让内容自动垂直居中)

     

    1. 对于图片,如下所示:

     

    
     
    .container{
     height:350px;
     border:1px solid #DDDDDD;
     text-align: center;
     line-height:350px;
    }
    .container img{
     vertical-align: middle;
     max-height: 350px;
     max-width:350px;
    }

    即可让它自动垂直居中了,至于个中原理,

    text-align: center;

    让子元素横向居中显示,这个大家都知道,

     vertical-align: middle;

    让行内元素自身纵向居中显示,但是有了这个属性就一定能垂直居中了吗?

    得意

    答案是否定的,相信大多数童鞋都在这碰过壁了,认为明明设置了纵向居中,为什么不生效? 我们必须在父容器上加上

     

     line-height:350px;

    设置父容器的行高才行,这两个属性缺一不可。

    2. 对于div

    对于div的居中,我之前一向用的

     

    {
        position:absolute;
        left:50%;
        top:50%;
        margin-left:-100px;
        margin-top:-50px;
        height:100px;
        width:200px;
    }
    

     

    
     

    这种方式来实现,然而最近我发现了另一种方式似乎更优雅一些

     

    {
        position:absolute;
        margin:auto;
        left:0;
        top:0;
        right:0;
        bottom:0;
        height:100px;
        width:200px;
    }
    展开全文
  • 经常接触到一些文字图片环绕的布局,或者文字和插图左右布局的场景,正好此前移动端开发中,碰到有一个这样的需求,左边文字是不定字数的,右边是一个插图,不管左边文字是多少,右边插图都要这个div中垂直居中...
  • 有时候我们会纠结于如何让这两种元素父容器DIV中垂直居中显示(当然 ,这里我们抛开表格布局不谈,因为表格可以让内容自动垂直居中) 1. 对于图片,如下所示: .container{ height:350px; border:1px ...
  • 如何让div在整个屏幕中垂直居中

    千次阅读 2016-08-29 16:06:49
    如图,若将中间登录页保持在垂直居中位置 css代码操作如下: .container{ width:100%; height:548px; top:50%; position:absolute; margin:-274px 0px 0px 0px; } 其中:top 表示距离顶端的距离, ...
  • 本来以为垂直居中使用 vertical-align:middle就可以了,但是在Div中就不起作用。 文字 这样写文字就不能垂直居中,因为vertical-align:middle这句不起作用(水平居中text-align:center是可以的) 所以Div中...
  • 需要图片的绝对定位postion: absolute. 一般定位时, 是用div去定位. 一般不直接用 非div去"绝对/相对"定位....然后, 再 定位的div中, 去设置其中包含的内容的 水平对齐等方式. 因此, 有这样的思路, 如果 要求 某...
  • div中图片居中

    2013-05-23 11:14:38
    Div与CSS布局,最人头疼的就是容器内的东西如何垂直居中的问题,我做站时也遇到,查了一下资料,总结出以下居中办法,兼容IE与及Firefox 虽然下述方法可以解决问题, 但较为繁琐,还不如直接用table来处理。 ...
  • 在div-css布局运用如何让图片在容器里垂直居中是很多人询问的问题,这里收集了几个例子WWYTechFeel第一个例子 ...
  • 在div-css布局运用如何让图片在容器里垂直居中是很多人询问的问题,这里收集了几个例子 第一个例子<!DOCTYPE ...
  • 虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,...━前言元素水平垂直居中是 web 开发常见遇到的问题方法 1-使用transform + absolute这个组合,常用于图片的居中显示,子元素设置绝对定位,父级...
  • 在进行网页布局的时候,有时候图片的位置可能会影响整个页面的美观程度,所以对于图片的放置位置就得变化,那么,接下来的这篇文章将给大家来介绍关于图片在网页中如何使用css实现居中的方法,对于有需要的朋友来说...
  • display:table和table-cell是如何让多行文字块内垂直居中? 网页见过的案例效果: HTML: &amp;lt;div class=&quot;parent&quot;&amp;gt; &amp;lt;p class=&quot;son&quot;&...
  • 那么今天我就给他大家总结下利用CSS实现DIV居中和利用JS/JQ进行居中的几种方法:CSS实现Div居中的方法:上面文章的实例代码就是如何利用CSS让DIV处于一个永远居中的状态,不管屏幕如何滑动,该p始终保持屏幕正...
  • CSS如何让图片垂直并水平居中等比缩放? 7:55 PM on 2009-12-18 Reply | Web优化 | CSS ( 49 ), div ( 10 ), 图片居中 这里先介绍一下淘宝网是如何处理这个问题的,刚网上查找解决方法时,发现淘宝网现前端...
  • css 居中问题

    2011-02-16 10:08:00
    CSS居中问题一直是大家比较关注的问题,此前的CSS在线的...而根据居中方向划分为:水平居中和垂直居中。下面我们来一一详述:CSS 设置水平居中A.如何设置CSS实现DIV的水平居中 CSS样式 div {margin-left: auto;...
  • CSS居中问题一直是大家比较关注的问题,此前的CSS在线的文章也曾多次提到过CSS居中的相关话题,今天对CSS居中问题做一个汇总。 CSS居中问题,根据居中对象划分主要包括:DIV居中,图片居中,以及文字居中。而根据...
  • 如果一行内容图片有文字的话,文字往往会自动的底部对齐,影响美观,那如何让它们相对于垂直居中呢,很简单,就是在图片和文字所在的行添加CSS属性:vertical-align:middle; 三、解决内嵌
  • CSS推荐文章第一辑

    2009-06-15 15:15:00
    去掉带超级链接图片的蓝色边框 css 实现层浏览器垂直居中 网站变成黑白的CSS代码,为四川汶川大地震遇难同胞深切哀悼 如何在网站中加入百度搜索功能? display与visibility的区别 实现div中的内容垂直居中的几种...
  • delphi 开发经验技巧宝典源码

    热门讨论 2010-08-12 16:47:23
    0208 DataGrid中如何使标题文字居中 138 0209 如何把ListBox的内容拖曳到另一个ListBox 139 0210 把DBGrid的数据赋给数组 139 0211 如何获取DataGrid单元格的内容 140 0212 如何锁定文本框的...
  • 零基础学HTML CSS源代码

    热门讨论 2010-05-10 07:57:26
    移动实例手把手—让图片像电影动起来.html 演示让图片像电影动起来。 第11章(源代码\第11章) 示例描述:本章演示网页多媒体标记的用法。 多媒体基本语法.html 多媒体基本语法。 多媒体循环播放.html ...
  • css入门笔记

    2018-05-15 14:58:57
    独立于任何网页位置处,声明一个样式文件(.css为后缀),文件声明样式,使用的网页引入.css文件。 使用步骤: 1.创建样式表文件(.css) 2.样式文件编写样式规则 3.网页对样式文件进行引入 <...
  • react-native 之布局篇

    2021-01-10 04:06:31
    <p>css 里边经常会做的事情是去讲一个文本或者图片水平垂直居中,如果使用过css 的flexbox当然知道使用<code>alignItems</code> 和 <code>justifyContent</code> . 那用react-native也来做一下实验 <pre>...

空空如也

空空如也

1 2
收藏数 29
精华内容 11
关键字:

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