<BODY>
<h1>未知宽高的图片水平垂直居中在div</h1>
<!--box-outer-->
<div class="box-outer">
<div class="box">
<img src="data:images/01.jpg" />
</div>
</div>
<!--box-outer-->
<h1>多行文本平垂直居中在div</h1>
<!--box-outer-->
<div class="box-outer">
<div class="box">
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
</div>
</div>
<!--box-outer-->
</BODY>

=============================

h1{
text-align: center;
margin:30px auto;
}
.box-outer{
width: 400px;
height: 400px;
margin: 30px auto;
}
.box {
width: 400px;
height: 400px;
border: 1px #000 dashed;
text-align: center;
vertical-align: middle;
display: table-cell;
*display: block;
*font-size: 175px;
/*约为高度的0.873，200*0.873 约为175*/

*font-family: Arial;
/*防止非utf-8引起的hack失效问题，如gbk编码*/
}
.box img {
vertical-align: middle;
}

可惜使用table-cell不兼容ie6.使用table-cell了，margin不起作用，可以外嵌套一层div

table-cell实现未知宽高图片，文本水平垂直居中在div的更多相关文章

  1. IOS UITableView 加载未知宽高图片的解决方案

    在开发中遇到了UITableView列表 UITableViewCell装载图片但不知Image的宽高 问题. 在解决该问题的时候,首先想到的是异步加载图片 采用第三方框架SDWebImage 实现对 ...

  2. CSS Transform让百分比宽高布局元素水平垂直居中

    很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;m ...

  3. 未知宽高图片水平垂直居中在div

    <BODY> <div class="box"> <span class="car"></span> <i ...

  4. div+css实现未知宽高元素垂直水平居中

    div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...

  5. CSS未知宽高元素水平垂直居中

    方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...

  6. js实现未知宽高的元素在指定元素中垂直水平居中

    js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...

  7. 未知宽高div水平垂直居中3种方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...

  8. 已知宽高和未知宽高的div块的水平垂直居中

    //已知宽高的情况 .div1_container{     border:1px solid #00ee00;     height:300px;     position:relative; } ...

  9. CSS实现文字和图片的水平垂直居中

    关于文字和图片的水平垂直居中,在前端界绝对算是一个老生常谈的问题了,尤其是垂直居中,什么千奇百怪的解法都能想的出来.下面我就总结一些比较常用的方法: 一.文本的水平垂直居中: 1.水平居中: 是不是很 ...

随机推荐

  1. JavaScript 实现命名空间（namespace）的最佳方案——兼容主流的定义类（class）的方法，兼容所有浏览器，支持用JSDuck生成文档

    作者: zyl910 一.缘由 在很多的面向对象编程语言中,我们可以使用命名空间(namespace)来组织代码,避免全局变量污染.命名冲突.遗憾的是,JavaScript中并不提供对命名空间的原生支 ...

  2. spring cloud ribbon和fegin

    一开始接触spring cloud的时候,还没有听说过微服务这个概念,对于服务直接的沟通是什么个情况,怎么组成微服务的完全懵逼,看到网上的教程都是用ribbong和fegin来调用接口,然后官网也给的 ...

  3. 为什么在有的服务器上禅道、蝉知安装会报错? 之理解MySQL的SQL_MODE

    最近用蝉知的CMS 建站比较多,感觉蛮顺手的,但在给客户安装的时候却会出现安装报错,其原因也很简单 查看了一下他们的install.sql文件中,有些时间字段的默认值是0000-00-00 00:00 ...

  4. 修改文件系统属性chattr，查看文件系统属性lsattr

    chattr chattr +i 文件或目录 , chattr +a 文件或目录,chattr -i 文件或目录,chattr -a 文件或目录,chattr =i 文件或目录,chattr =a 文 ...

  5. CSS文字不换行，溢出省略

    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

  6. [置顶] Xamarin android如何调用百度地图入门示例（一）

    在Xamarin android如何调用百度地图呢? 首先我们要区分清楚,百度地图这是一个广泛的概念,很多刚刚接触这个名词"百度地图api",的确是泛泛而谈,我们来看一下百度地图的 ...

  7. Cookie的简单用法

    ASP.NET初学者使用cookie的时候会感觉很陌生,在学习的过程中掌握cookie对象的增删改查非常有必要,,下面是我学习的时候经常用到的这些方法 写入和读取Cookie都需要用户Respone对 ...

  8. ArcGIS Runtime SDK是什么？

    如上图,Runtime SDK是什么东西?居然还有安卓.苹果手机.Mac.QT的版本? 是不是意味着ArcGIS的编辑数据和空间分析可以通过编程的方法在每个平台上满地跑了? 答案是:是,也不是. 1. ...

  9. iOS XIB等比例适配

    选择两个视图使其等宽高,再去约束里面就可以设置乘数因子. 简单的一个例子: 要求:设置白色视图的宽度为蓝色视图的一半 1.点击白色视图连线到父视图,选择 Equal Widths     2.选择右边 ...

  10. centOS7 jdk安装

    1.查找需要卸载的OpenJDK: #  rpm -qa | grep java 2:依次卸载 rpm -e --nodeps javapackages-tools-3.4.1-6.el7_0.noa ...