精华内容
下载资源
问答
  • 在曾经的 淘宝UED 招聘 中有这样一道题目: “使用纯CSS实现+未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意,而是有其现实的原因,垂直居中是淘宝工作中最常遇到的...
  • css图片垂直居中

    2019-04-03 01:13:17
    NULL 博文链接:https://gucaihe.iteye.com/blog/1465144
  • 利用css flex实现垂直居中。flex可能不是实现垂直居中最好的选择,因为IE8,9并不支持它。 现在,为了用flex实现垂直居中,我们首先要创建一个包裹着图片的div元素,然后给它定义一些基础属性。 以下图片img宽度为...

    本教程为thinkcss教大家三种让img元素图片在盒子内垂直居中的方法教程,根据代码与文章教程理解掌握并加以使用。

    一、使用flex实现垂直居中

    利用css flex实现垂直居中。flex可能不是实现垂直居中最好的选择,因为IE8,9并不支持它。

    现在,为了用flex实现垂直居中,我们首先要创建一个包裹着图片的div元素,然后给它定义一些基础属性。

    以下图片img宽度为(设置为)100px高度100px

    HTML代码部分:

    <div class="flexbox">

    <img src="1.jpg" alt="">

    </div>

    CSS代码部分:

    body{ background:#999}

    .flexbox{width: 300px;height: 250px;background:#fff;display: flex;align-items: center}

    .flexbox img{width: 100px;height: 100px;align-items: center;}

    效果:

    浏览器运行效果:实现图片垂直居中布局

    解释:

    1、为了用flex实现垂直居中,我们首先要创建一个包裹着图片的div元素,然后给它定义一些基础属性。

    2、div元素的display属性设置为flex。

    3、div添加另外一条属性align-items: center;

    二、利用Display: table;实现img图片垂直居中

    html代码:

    <div class="tablebox">

    <div id="imgbox">

    <img src="1.jpg" alt="">

    </div>

    </div>

    CSS代码:

    .tablebox{width: 300px;height: 250px;background: #fff;display: table}

    #imgbox{display: table-cell;vertical-align: middle;}

    #imgbox img{width: 100px}

    解释:

    1、首先我们先要创建一个div元素以及另外一个包含图片的div元素,然后我们开始设置它的样式。

    2、给img父元素设置display属性为table

    3、把包裹图片的那个div元素的display属性设置为table-cell

    4、为了实现垂直居中,我们现在要做的就是给包裹图片的div元素设置vertical-align: middle;属性

    注意:如果你也想实现水平居中,你可以给最外层的div元素添加text-align: center属性,注意不是id=”img”的div

    三、用绝对定位实现垂直居中(推荐-兼容性好)

    HTML代码:

    <div class="posdiv">

    <img src="1.jpg" alt="">

    </div>

    CSS代码:

    body{background: #ccc;}

    .posdiv{width: 300px;height: 250px;background: #fff;position: relative; margin:0 auto}

    .posdiv img{width: 100px;position: absolute;top: 50%;margin-top: -50px;}

    解释:

    1、一张包裹在div中的img图片,我们给不光给图片以及div元素定义了尺寸,还给div元素定义了#fff的背景色(背景颜色可以根据需求设置)。

    2、给img的父元素添加相对定位属性(position: relative),同时,要给子元素也就是图片img元素添加绝对定位属性(position: absolute)。

    3、将图片元素的top属性设置为50%。

    4、现在我们需要给img元素设置一个负的margin-top值,这个值为你想要实现垂直居中的元素高度的一半,*如果不确定元素的高度,可以不使用margin-top,而是使用transform:translateY(-50%);属性。

    记住:如果你想要同时实现水平居中,那么你可以用实现垂直居中的一样的技巧来实现。

    通过以上三种方法让img图片垂直居中,希望大家能掌握布局方法与原理。

     

    来自 <https://www.thinkcss.com/jiqiao/1492.shtml>

    展开全文
  • 看到问此问题的很多,所以花点时间整理下,欢迎大家提意见,做补充修改,谢谢
  • css图片垂直居中代码,超级简单,css只有二行,其中css最核心的地方用到 position,transform,解决以往代码多,或用table来居中的麻烦。
  • css图片垂直居中自适应

    万次阅读 2016-10-10 08:47:27
    那么垂直居中呢?是不是给img加vertical-align: middle;就可以了呢?答案显然是否定的,单纯的给img加vertical-align: middle;并不能行,我平时用的比较多的办法有两种。方法一: <style type="text/css&...

    我们在应用图片的时候经常会碰到要让图片在容器里居中的情况,水平居中很简单直接给容器添加text-align: center;就ok了。那么垂直居中呢?是不是给img加vertical-align: middle;就可以了呢?

    答案显然是否定的,单纯的给img加vertical-align: middle;并不能行,我平时用的比较多的办法有两种。

    方法一:

    <style type="text/css">
    	body,p {
    		margin: 0;
    		padding: 0;
    		}
    	div {
    		width: 300px;
    		height: 300px;
    		border: 1px solid #c6c6c6;
    		margin: 50px auto;
    		text-align: center;
    		}
    	a {
    		display: inline-block;
    		vertical-align: middle;
    		}
    	span {
    		display: inline-block;
    		width: 0;
    		height: 100%;
    		vertical-align: middle; 
    		}
    	img {
    		border: 1px solid #00f;
    		}
    	
    </style>
    </head>
    
    <body>
    <div>
        	<a href="#"><img src="images/img_03.jpg" /></a><span></span>
    </div>
    </body>
    

    我的做法是添加一个空的span标签,然后给span标签设置成100%的高再让它居中,这样就能让a标签页同时居中。有些人会问你为啥要给img包a标签呢?实际应用中我们的图片经常都是需要可以被点击的跳转链接的。如果你的图片不需要被点击你也可以直接把vertical-align: middle; 加在img中。像这样

    img {
    		border: 1px solid #00f;
    		vertical-align: middle;
    		}
    <div>
        	<img src="images/img_03.jpg" />
    </div>
    

    效果是一样的。
    方法二:

    div {
    	position: relative;
        width: 100%;
        height: 238px;
    }
    img {
    	position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        max-width: 100%;
        max-height: 100%;
    }
    <div>
        	<img src="images/img_03.jpg" /><span></span>
    </div>
    

    通过绝对定位,垂直和水平都居中了

    方法三:

    这个很简单,之间用 (div高 - 图片高) /2 然后设置margin-top 就ok了,但这么做不能够自适应,纯靠人工计算显得有点蠢。

    下面是两种方法的实现效果图:

    这里写图片描述


    写得不对的地方欢迎交流指正,码字不易,拒绝未沟通情况下转载。CSDN博客:PromiseCao;



    所有博客已转移至个人博客地址www.clramw.top

    相关文章:css让图片自适应容器(div)大小

    深度好文:清除浮动float的七种方法总结和兼容性处理

    展开全文
  • 让html img图片垂直居中的三种方法 flex的align-items: center; <div class="duty-header__label"> <span class="img"> <img src="../../../assets/images/workbench/today_duty_icon.png" alt="...

    文章参考

    1. 让html img图片垂直居中的三种方法

    flex的align-items: center;

    <div class="duty-header__label">
      <span class="img">
    	<img src="../../../assets/images/workbench/today_duty_icon.png" alt="" />
      </span>
      <span class="title">今日值班</span>
      <span class="column"></span>
    </div>
    <style>
    .img{
      display: inline-block;
      height: 48px;
      display: flex;
      align-items: center;
      img {
    	display: inline-block;
    	width: 32px;
    	height: 32px;
      }
    }
    </style>
    
    1. span 的高度是 48px,大于图片 32px 高度
    2. 利用align-items: center;属性,垂直居中

    display: table-cell;的vertical-align: middle;

    <span style="display: table; height:48px; width:48px;">
      <span class="img">
        <img src="../../../assets/images/workbench/today_duty_icon.png" alt="" />
      </span>
    </span>
    <style>
    .img{
      display: inline-block;
      height: 48px;
      display: table-cell;
      img {
    	vertical-align: middle;
    	width: 32px;
    	height: 32px;
      }
    }
    </style>
    
    1. 设置最外层控件为 display: table
    2. 包裹图片的控件为 display: table-cell
    3. 设置图片为 vertical-align: middle;

    position: 50%和margin-top: -16px;(推荐)

    <span class="img">
      <img src="../../../assets/images/workbench/today_duty_icon.png" alt="" />
    </span>
    
    <style></style>
    .img{
      position: relative;
      height: 48px;
      width: 48px;
      img {
    	position: absolute;
    	top: 50%;
    	margin-top: -16px;
    	width: 32px;
    	height: 32px;
      }
    }
    
    1. 设置图片的容器高度为48px, 并且为 relative 定位
    2. 图片使用 absolute 定位, top 为50%, 则图片的顶部是在 如容器的 中间横线
    3. 设置图片的 margin-top: -16px; 16px即为图片高度的一半,就相当于图片居中对齐了

    这种定位方式需要了解图片的高度

    展开全文
  • CSS图片垂直居中问题,困扰了我许久,今天终于可以总结下来了
  • 主要为大家介绍CSS图片响应式 垂直水平居中,在最近的项目中经常遇到这样的需求,于是把相关内容整理一下,分享给大家,需要的朋友可以来参考下
  • 本文实例讲述了CSS实现同一行的图片和文字垂直居中对齐的方法。分享给大家供大家参考。具体分析如下: 有些朋友会发现,如果一行内容中有图片有文字的话,文字往往会自动的底部对齐,影响美观,那如何让它们相对于...
  • CSS图片垂直居中方法

    2016-07-27 15:39:54
    图片垂直居中是个经典的...“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常遇到的一个问题,很

    图片垂直居中是个经典的问题,网上关于这个的方法也非常多,良莠不齐,本人比较推荐的以下三种简单的方法,大家可以稍做参考。

    1.淘宝的方法

    在曾经的"淘宝UED招聘"中有这样一道题目:

    “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”

    当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常遇到的一个问题,很有代表性。

    题目的难点在于两点:

    垂直居中;
    图片是个置换元素,有些特殊的特性。
    至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法:

    .box {
     
     display: table-cell;
     vertical-align:middle;

     
     text-align:center;

     
     *display: block;
     *font-size: 175px;
     *font-family:Arial;

     width:200px;
     height:200px;
     border: 1px solid #eee;
    }
    .box img {
     
     vertical-align:middle;
    }

    <div class="box">
     <img src="http://pics.taobao.com/bao/album/promotion/
    taoscars_180x95_071112_sr.jpg" />
    </div>

    2.背景法
    <style type="text/css">
    * {margin:0;padding:0;}
    div {
        width:500px;border:1px solid #f00;
        height:500px;
        background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat
        }
    </style>
    <div>
    </div>

    最简单的方法莫过于背景法了,但不利于动态导入的图片

    3.背景法

    .qq {
        width:500px;
        display:table-cell;
        height:400px;
        text-align:center;
        vertical-align:middle;
        border: 1px solid #000
    }
    i {
        display:inline-block;
        height:100%;
        vertical-align:middle
    }
    .qq img {
        vertical-align:middle;
    }
    </style>
    <div class="qq"><i></i><img src="http://www.baidu.com/img/baidu_logo.gif" /></div>

    这种方法也很简单,但需要加一个<i>的额外标签,小不爽~

    如果页面需要一两个居中的图片,那此方法是可推荐,但如果很多个产品的图,那加的标签数量可不是小数目喽~大家衡量着使用吧

    另外也有其它的许多解决方法,只是看起来并不怎么理想,相对简单并且可推荐就是以上这三种,其它的这里就不作介绍了,有兴趣的朋友可以看这里:http://bbs.blueidea.com/thread-2666987-1-9.html

    另外,再说一下文字垂直居中的方法。一直以为此方法同样有效于图片,只是昨天做一个DEMO才发现原来不行。

    div{
        height: 400px;
        line-height: 400px;
        overflow: hidden;
        }

    此方法也只适用于单行的文字,或者是图片+文字,通常可见于页面上的前面带有小图标的链接或标题等。

    展开全文
  • 图片的宽度和高度是未知的,没有一个固定的尺寸,在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中,想想感觉还是挺麻烦的,由于最近的项目可能会用到这个方案,所以把一些常用的方法都收集整理了一下。
  • CSS教程提供了两种对齐方式即垂直居中对齐和...CSS使图片垂直居中的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><...
  • css图片垂直居中显示

    2021-02-27 10:32:50
    记录一下图片垂直居中显示方法,免得日后忘记了 width: 100%; height: 100%; object-fit: cover;
  • CSS图片垂直居中

    2019-09-15 18:26:38
    在写项目的时候,我想让一张图片垂直居中,可是又不知道怎么做,于是在网上找了一些方案,一下的方法都经过我自己的试验,在我的代码中是能够实现图片垂直居中的效果的 利用display:table-cell div { height: 100vh...
  • css3图片垂直居中

    2019-08-23 10:03:39
    图片相对父元素垂直居中, css3属性给父级元素设置 display: -webkit-box; -moz-box-align: center; -webkit-box-align: center; ...
  • css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍。 css图片水平居中 利用margin: 0 auto实现图片水平居中 利用margin: 0 auto实现图片居中就是...
  • DIV+CSS 图片垂直居中效果
  • css图片左右上下居中

    2017-03-02 11:27:54
    html: css: div{ width: 50%; height: 500px; border: 1px solid black; text-align: center; } div span{ display: inline-block; height: 100%; vertical-align: middle; } div img{
  • css图片居中垂直居中Here's one solution to centering an image both horizontally and vertically, when you know the height of the container. Tested in FF, IE6, IE7 当您知道容器的高度时,这是一种将图像...
  • 图片垂直居中,原理应该就是,还是大家慢慢自己品味吧,以下方法兼容ie6的,感兴趣的各位可以参考下哈,希望对大家有所帮助
  • 图片垂直居中css方法今天我要介绍的是采用css进行图片居中的5个方法。首先确定我们的HTML结构(若不特别说明,下面皆采用该HTML结构) </div>1.此方法会在img标签前加上一个inline-block的span标签,并给两个标签都...
  • 在网页设计过程中,有时候会希望图片垂直居中的情况。而且,需要垂直居中图片的高度也不确定,这就会给页面的布局带来一定的挑战。下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...meta name="viewport" content="width=device-width, initial-scale=1.0">...Document&l.
  • 有时需要产品图片水平垂直居中显示,这种展示用CSS来实现又是比较棘手的一件事,我想很多前端攻程师都有研究过或者说是搜索过这些方法吧。很多网站都是使用table来实现产品图片垂直居中,实现也是相当的方便,唯一...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 41,448
精华内容 16,579
关键字:

css图片上下居中