活用:after 让图片垂直居中
现在莫名虽然更喜欢 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 让图片垂直居中的更多相关文章
- div+css:div中图片垂直居中
div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- CSS让图片垂直居中的几种技巧
在网页设计过程中,有时候会希望图片垂直居中的情况.而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战.下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标 ...
- 图片垂直居中 和 float
//图片垂直居中, display:table-cell; vertical-align:middle; 不能和 css (float)元素共存,可以在元素外面多加一个层 css .th-left ...
- CSS中如何实现未知尺寸图片垂直居中
在曾经的 淘宝UED 招聘 中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是随意,而是有其现实的原因,垂直居中 ...
- CSS设置图片垂直居中的方法
如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...
- div图片垂直居中 如何使div中图片垂直居中
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-03) 『此方法在ie7下,如果.box的高度为800等比较大的数值时,并不能起到垂直居中的作用.』 点评:关于图片垂 ...
- css图片垂直居中
css图片垂直居中一.style代码 .case-pic{ height: 125px; position: relative; text-align: center } .case-pic span ...
- CSS让图片垂直居中的几种技巧 三种方法介绍
在网页设计过程中,有时候会希望图片垂直居中的情况.而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战.下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标 ...
- 使用CSS3伸缩盒实现图片垂直居中
用CSS实现图片垂直居中的方法有很多,针对移动端设备可以用CSS3伸缩盒来实现图片垂直居中. 代码如下: <div class="box"> <img src=& ...
随机推荐
- 介绍两款Linux文件恢复工具,ext3grep与extundelete https://www.cnblogs.com/lazyfang/p/7699994.html
介绍两款Linux文件恢复工具,ext3grep与extundelete,可能在关键时刻会有所帮助.ext3grep仅对ext3文件系统有效,extundelete对ext3与ext4文件系统都有效 ...
- AOF 持久化策略
Redis为了解决AOF后台重写造成的数据不一致问题,设置了AOF重写缓冲区.即使设置了no-appendfsync-on-rewrite yes也会造成短暂的主进程阻塞.原因就在于子进程完成AOF重 ...
- js实现pdf对页面的打印
//-------------------------------点击打印的图标--------------------------------- <div class="dcsc&q ...
- Servlet 调试
测试/调试 Servlet 始终是开发使用过程中的难点.Servlet 往往涉及大量的客户端/服务器交互,可能会出现错误但又难以重现. 这里有一些提示和建议,可以帮助您调试. System.out.p ...
- JSP接口浅析
一.tree型关系 JSP页面继承了org.apache.jasper.runtime.HttpJspBase抽象类并实现了org.apache.jasper.runtime.JspSourceDep ...
- python 自动化之路 day 19 Django基础[二]
Django - 路由系统 url.py - 视图函数 views.py - 数据库操作 models.py - 模板引擎渲染 - HttpReponse(字符串) - render(request, ...
- 常见cout格式输出
cout.setf(ios::fixed);//设置格式 cout.unsetf(ios::fixed);//取消格式 cout.setf(ios::scientific);//科学记数法 cout. ...
- 【BZOJ3638】Cf172 k-Maximum Subsequence Sum 线段树区间合并(模拟费用流)
[BZOJ3638]Cf172 k-Maximum Subsequence Sum Description 给一列数,要求支持操作: 1.修改某个数的值 2.读入l,r,k,询问在[l,r]内选不相交 ...
- dfs-求连通块
状态:若为W则继续搜索 import java.util.Scanner; public class Main { static int n,m; static char[][] field; sta ...
- POJ 3259 Wormholes【bellman_ford判断负环——基础入门题】
链接: http://poj.org/problem?id=3259 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=22010#probl ...