现在莫名虽然更喜欢 background 但大多时候还是选择用 img,这其中的利弊争议不在本文中赘述。

那么在布局中常会遇到定高容器中图片居中的需求,这时就有很多方法了呀:

line-height + vertical-align:middle;

table-cell + vertical-align:middle;

absolute + transform: translate(-50%,-50%); (或者 absolute + margin)

甚至不用全宽的: padding + height: x%;

而今天要用的方法呢,看完你就差不多懂了

.pic_box{
  width:300px;
  height:300px;
  background-color:#beceeb;
  text-align:center;
}
.pic_box img{
  vertical-align:middle;
}
.pic_box:after{
  display:inline-block;
  width:0;
  height:100%;
  content:"center";
  vertical-align:middle;
  overflow:hidden;
}

是不是很简单,虚构一个全高的隐形的 :after 然后让图片和它居中。

好吧,又写完一篇,今天第三篇了,好带感呀

活用:after 让图片垂直居中的更多相关文章

  1. div+css:div中图片垂直居中

    div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  2. CSS让图片垂直居中的几种技巧

    在网页设计过程中,有时候会希望图片垂直居中的情况.而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战.下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标 ...

  3. 图片垂直居中 和 float

    //图片垂直居中, display:table-cell; vertical-align:middle;   不能和 css (float)元素共存,可以在元素外面多加一个层 css .th-left ...

  4. CSS中如何实现未知尺寸图片垂直居中

    在曾经的 淘宝UED 招聘 中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是随意,而是有其现实的原因,垂直居中 ...

  5. CSS设置图片垂直居中的方法

    如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...

  6. div图片垂直居中 如何使div中图片垂直居中

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-03) 『此方法在ie7下,如果.box的高度为800等比较大的数值时,并不能起到垂直居中的作用.』 点评:关于图片垂 ...

  7. css图片垂直居中

    css图片垂直居中一.style代码 .case-pic{ height: 125px; position: relative; text-align: center } .case-pic span ...

  8. CSS让图片垂直居中的几种技巧 三种方法介绍

    在网页设计过程中,有时候会希望图片垂直居中的情况.而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战.下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标 ...

  9. 使用CSS3伸缩盒实现图片垂直居中

    用CSS实现图片垂直居中的方法有很多,针对移动端设备可以用CSS3伸缩盒来实现图片垂直居中. 代码如下: <div class="box"> <img src=& ...

随机推荐

  1. iOS图片加水印效果的实现并保存至相冊

    图片加水印效果的实现并保存至相冊 实现效果如图: project下载:githubproject下载链接 代码: - (void)viewDidLoad { [super viewDidLoad]; ...

  2. https原理与实践

    HTTPS 原理与证书实践   分类: Web应用   1.1 网络安全知识 1.1.1 网结安全出现背景 网络就是实现不同主机之间的通讯,网络出现之初利用TCP/IP协议簇的相关协议概念,已经满足了 ...

  3. Permission denied (publickey). fatal: Could not read from remote repository. Please make sure you have the correct access rights

    第一次提交遇到这样的情况,怎么回事呢,我在github上提交了ssh key 的啊. 排查先看看能不能解析, 1.先 ping https://github.com 把ip添加到 host :    ...

  4. c# 扩展方法奇思妙用基础篇八:Distinct 扩展

    刚看了篇文章 <Linq的Distinct太不给力了>,文中给出了一个解决办法,略显复杂. 试想如果能写成下面的样子,是不是更简单优雅 var p1 = products.Distinct ...

  5. PDO drivers no value in Windows

    学习php编程遇到 Uncaught exception 'PDOException' with message 'could not find driver' 或者 Undefined class ...

  6. idea 全部报错找不到包

    解决报错方法如下:

  7. Python抓取豆瓣《白夜追凶》的评论并且分词

    最近网剧<白夜追凶>在很多朋友的推荐下,开启了追剧模式,自从琅琊榜过后没有看过国产剧了,此剧确实是良心剧呀!一直追下去,十一最后两天闲来无事就抓取豆瓣的评论看一下 相关代码提交到githu ...

  8. 关于new HashMap<>(1)中1的理解(hashMap的加载因子)

    新入公司,阅读代码的时候发现了一行代码,为 Map<String, String> map=new HashMap<>(1); 对于这个括号里面的1不能理解,于是查了资料,大概 ...

  9. Young Maids

    E - Young Maids Time limit : 2sec / Memory limit : 256MB Score : 800 points Problem Statement Let N  ...

  10. EasyNVR智能云终端硬件与EasyNVR解决方案软件综合对比

    背景分析 互联网视频直播越来越成为当前视频直播的大势,对于传统的安防监控,一般都是局限于内网,无法成批量上云台.传统的海康和大华的平台虽然可以通过自身私有协议上云平台 集总管控,但是往往只是支持自身的 ...