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"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...
随机推荐
- winform无边框窗体点击任务栏最小化
protected override CreateParams CreateParams { get { const int WS_MINIMIZEBOX = 0x00020000; // Winus ...
- 【三小时学会Kubernetes!(五) 】完成整个架构
完成整个架构 现在我们学习了完成架构的所有必须的资源,因此这一节会非常快.图 22 中灰色的部分是需要做的事情.让我们从底部开始:部署 sa-logic 的部署. 图 22:当前应用程序状态 部署 S ...
- Java编码方式再学
一直以来对编码方式对了解不是很深入.建议读下这几篇博文 学点编码知识又不会死:Unicode的流言终结者和编码大揭秘 编码研究笔记 这几篇博文上回答了内心存在的一些问题,这些问题可能也是大家经常遇到的 ...
- Neutron二层网络服务实现原理
网络 网络(network)是一个隔离的二层网段,类似于物理网络世界中的虚拟 LAN (VLAN).更具体来讲,它是为创建它的租户而保留的一个广播域,或者被显式配置为共享网段.端口和子网始终被分配 ...
- grunt-init 默认模板目录更正
grunt-init是依赖grunt项目管理的脚手架工具,各种优点无须赘述,默认的template路径的作用:可以把自定义或其他模板放置其中,应用的时候直接调用模板名,不用每次寻找路径: 在安装gru ...
- MySQL使用通用二进制格式安装
CentOS7安装MySQL的方法之通用二进制格式
- CMDB后台管理(AutoServer)
1.表结构设计 from django.db import models class UserProfile(models.Model): """ 用户信息 " ...
- LeetCode OJ:Partition List(分割链表)
Given a linked list and a value x, partition it such that all nodes less than x come before nodes gr ...
- Windows平台编程涉及的函数
VirtualAlloc 调用进程的虚拟地址空间 GetTickCount 返回从操作系统启动到当前所经历过的毫秒数 malloc.h内存分配函数,需要头文件malloc.h
- Ubuntu 14.10安装simplescalar
经过两天的安装,终于把simplescalar安装成功,安装过程中在网上找了很多资料,但是很多都是关于低版本ubuntu安装的过程,而且按照这些教程也没有安装成功,来记录一下安装中出现的问题及解决方案 ...