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"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...
随机推荐
- 文件load事件:img、iframe
iframe的 load 事件 在所有为IFRAME动态添加onload监听事件的方法中,只有 使用事件监听方式为 IFRAME 的 onload 事件绑定处理函数,IE6.7.8才有效.所以为 IF ...
- python学习大纲目录(转自alex博客https://www.cnblogs.com/alex3714/)
day01: 介绍.基本语法.流程控制 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据类型初识 数据运算 ...
- [nodejs]解决mysql和连接池(pool)自动断开问题
最近在做一个个人项目,数据库尝试使用了mongodb.sqlite和mysql.分享一下关于mysql的连接池用法.项目部署于appfog,项目中我使用连接池链接数据库,本地测试一切正常.上线以后,经 ...
- struts-2.3.24.1中的jar的详解
Struts2.3.24.1核心Jar包详解 antlr-2.7.2.jar 语言转换工具,它是接受词文法语言描述,并能产生识别这些语言的语句的程序的一种工具 a ...
- Python 脚本注册为Windows Service
这部分内容就如同标题所讲的,其他的也不说了,直接上代码吧 需要说明的是,此代码在我的Win10 下可以正常使用,而在windows server 2008没有运行成功. 如果出现拒绝访问的错误,请使用 ...
- activiti 动态自定义流程(包含会签流程)
后台加入工作流步骤(这个不重要,自己实现) package com.blk.integrated.pojo; import java.io.Serializable; import java.util ...
- Vue项目上线后刷新报错404问题(apache,nginx,tomcat)
转自:https://www.cnblogs.com/sxshaolong/p/10219527.html 很简单,需要 服务器端 加个配置文件,然后 重启服务就好了,记住一定要 重启服务,否则无效!
- 【jQuery】IE9 jQuery 1.9.1 报 Syntax error,unrecognized expression 错误
<script type="ctrip-template-x" id="ctrip-page-index"> <article class=& ...
- PHP获取随机数的函数rand()和mt_rand()
rand()函数用户获取随机数,具体用法如下: rand()可以设置0个参数或者两个参数,如rand($min,$max),$min表示从XX开始取值,$max表示最大只能为XX 例如: <?p ...
- 记用ajax网页跳转大坑——后台执行了,但是没有跳转
搭建javaweb服务器的时候,把jsp文件放在WEB-INF目录下面,因为超链接不能所有只能通过拦截器,用do方法跳转 controller写的是对的: @Controller public cla ...