table-cell实现未知宽高图片，文本水平垂直居中在div
<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的更多相关文章
- IOS UITableView 加载未知宽高图片的解决方案
在开发中遇到了UITableView列表 UITableViewCell装载图片但不知Image的宽高 问题. 在解决该问题的时候,首先想到的是异步加载图片 采用第三方框架SDWebImage 实现对 ...
- CSS Transform让百分比宽高布局元素水平垂直居中
很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;m ...
- 未知宽高图片水平垂直居中在div
<BODY> <div class="box"> <span class="car"></span> <i ...
- div+css实现未知宽高元素垂直水平居中
div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...
- CSS未知宽高元素水平垂直居中
方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...
- js实现未知宽高的元素在指定元素中垂直水平居中
js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...
- 未知宽高div水平垂直居中3种方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...
- 已知宽高和未知宽高的div块的水平垂直居中
//已知宽高的情况 .div1_container{ border:1px solid #00ee00; height:300px; position:relative; } ...
- CSS实现文字和图片的水平垂直居中
关于文字和图片的水平垂直居中,在前端界绝对算是一个老生常谈的问题了,尤其是垂直居中,什么千奇百怪的解法都能想的出来.下面我就总结一些比较常用的方法: 一.文本的水平垂直居中: 1.水平居中: 是不是很 ...
随机推荐
- 大白话Vue源码系列(02)：编译器初探
阅读目录 编译器代码藏在哪 Vue.prototype.$mount 构建 AST 的一般过程 Vue 构建的 AST 题接上文,上回书说到,Vue 的编译器模块相对独立且简单,那咱们就从这块入手,先 ...
- python爬虫(四)_urllib2库的基本使用
本篇我们将开始学习如何进行网页抓取,更多内容请参考:python学习指南 urllib2库的基本使用 所谓网页抓取,就是把URL地址中指定的网络资源从网络流中读取出来,保存到本地.在Python中有很 ...
- SAP ABAP编程 Table Control动态隐藏列
在SAP DIALOG设计中,有时候须要动态的隐藏某些列,以下是方法. ***数据定义 CONTROLS: table_control TYPE TABLEVIEW USING SCREEN 0100 ...
- 获取手机是否root信息
private String isRoot(){ String bool = "Root:false"; try{ if ((!new File("/system/bin ...
- IntelliJ Idea 2017 注册码 免费激活方法
1. 到网站 http://idea.lanyus.com/ 获取注册码. 2.弹窗中选择最后一个页面license server,填入下面一种链接即可: http://idea.iteblog.co ...
- NanUI文档 - 打包并使用内嵌式的HTML/CSS/JS资源
NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript相互掉用(待更新...) 如何处理Nan ...
- python小整数与str数据池，编码关系
1.小数据池:数字,字符串 数字的范围-5 ---256 字符串:1,不能有特殊字符 2,s*20 还是一个地址,s*21以后都是两个地址 2.编码关系:ascii A : 00000010 8位 一 ...
- 在Windows上运行Spark程序
一.下载Saprk程序 https://d3kbcqa49mib13.cloudfront.net/spark-2.1.1-bin-hadoop2.7.tgz 解压到d:\spark-2.1.1-bi ...
- 解决[babel] note:the code generator has deoptimised the styling...
在使用webpack的babel-loader编译es6的js文件时,出现了如题的提示. 解决方法如下: loaders: [ { test: /\.js$/, loader: 'babel', qu ...
- dubbo+zookeeper+jsp+springmvc+spring+mybatis+mysql+maven完整示例
项目分为三部分,这里分为三个maven项目(基于web,所以最后一个为maven创建的web项目) 1.接口定义以及实体类定义(api+pojo) --- maven创建java项目,打包成jar 2 ...