css设置图片水平及垂直居中
.box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/ *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/ width:200px; height:200px; border: 1px solid #eee; } .box img { /*设置图片垂直居中*/ vertical-align:middle; }
另一种设置图片垂直的简单方法:
1.设置DIV的属性
2.设置span的属
3.设置图片的属性
4.HTML的源代码
5.原理: 利用vertical-align实现垂直,决定行高的是行内最高的元素的值。
css设置图片水平及垂直居中的更多相关文章
- DIV里面的图片水平与垂直居中的方法
<div class=“box”> <img /> </div> 1.水平居中: 1)box设置 text-align:center ; text-alig ...
- DIV或者DIV里面的图片水平与垂直居中的方法
<div class=“box”> <img /> </div> 水平居中的常用方式: text-align:center ——这可以实现子元素字体,图片的水平居中 ...
- css设置图片居中、居左、居右
CreateTime--2017年12月8日14:25:09 Author:Marydon css设置图片居中.居左.居右 图片一般默认是居左显示的,如何更改它的水平位置呢? <div st ...
- CSS制作图片水平垂直居中
所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...
- CSS制作图片水平垂直居中 亲测推荐
空白标签实现图片的垂直居中 这种方法很有意思,也很有独特之处,我的思路也是来自于张鑫旭-鑫空间-鑫生活写的<大小不固定的图片.多行文字的水平垂直居中>一文中的使用空白图片实现垂直对齐.他主 ...
- CSS设置图片垂直居中的方法
如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...
- css实现图片水平垂直居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使图片水平并垂直居中的一个Hack
淘宝的一个前端面试题:使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中. 想起了vertical-align:middle;但是不行,后来才知道还要di ...
- CSS设置图片居中的方法
如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...
随机推荐
- ctci1.8
bool isSub(string str0, string str1){ if(str0.length() != str1.length()) return false; ...
- python 读取、保存、二值化、灰度化图片+opencv处理图片的方法
http://blog.csdn.net/johinieli/article/details/69389980
- 多网卡绑定(bond)
通过以下命令查看bond0的工作状态查询能详细的掌握bonding的工作状态,如这个绑定各网卡的工作状态.主备关系.链路侦测时间[root@ASMTS ~]# cat /proc/net/bondin ...
- Android实现布局控件自定义属性
一.自定义ViewGroup 1.onMeasure 决定内部View(子View)的宽度和高度,以及自己的宽度和高度 2.onLayout 决定子View放置的位置 3.onTouchEvent 定 ...
- mongo docker image
mongo 保存压缩镜像 docker save -o ~/Desktop/mongo.tar mongo 7za a -mx=9 ~/Desktop/mongo.tar{.7z,} 导入或拉取镜像 ...
- 13.LockSupport工具
1. LockSupport简介 在之前介绍AQS的底层实现,已经在介绍java中的Lock时,比如ReentrantLock,ReentReadWriteLocks,已经在介绍线程间等待/通知机制使 ...
- nginx默认配置
user nobody; worker_processes 2; worker_cpu_affinity 000000001000 000000010000; worker_rlimit_nofile ...
- Prism 4 文档 ---第7章 组成用户界面
一个应用程序的用户界面(UI)可以通用以下几种模式之一来构建: 窗体所需要所有的控件都包含在一个单独的XAML文件中,在设计时组合这个窗体. 窗体的逻辑区域被分割到单独的部分中,通常指哟过户控件.这些 ...
- SQL Plus常用命令
1.常用命令:显示当前用户名:show user登录到数据库:conn[etc] 用户名/密码@网络[as sysdba / as sysoper] 简单写法:conn 用户名/密码 con ...
- 过滤器(Filter)
1 什么是过滤器 过滤器JavaWeb三大组件之一,它与Servlet很相似!不它过滤器是用来拦截请求的,而不是处理请求的. 当用户请求某个Servlet时,会先执行部署在这个请求上的Filter,如 ...