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.水平居中: 是不是很 ...
随机推荐
- 鼠标悬停，图片放大 CSS实现
因为最近做的项目刚好用到了这个实现,分享出来 class=enlarge 为div标签的class div img 为标签 .enlarge div img:hover{ transform: s ...
- APP端的网络优化（DNS优化，HTTP优化）
一.使用httpDNS优化DNS解析和缓存 一般来说在App内用域名发送请求都要经过DNS解析出ip,然后再根据ip去拿对应的资源,这个过程中,如果LocalDNS中存在这个域名对应的ip,就会直接返 ...
- ssh服务、密钥登陆配置
环境内核信息: [root@zabbix-01 ~]# uname -a Linux lodboyedu-01 2.6.32-696.el6.x86_64 #1 SMP Tue Mar 21 19:2 ...
- 一个模型中有两个外键指向同一张表时，创建迁移模型时报错：“ HINT: Add or change a related_name argument to the definition for 'AnswersModel.author' or 'AnswersModel.relay_to'.”解决方案
class AnswersModel(models.Model): author = models.ForeignKey(FrontUserModel,null=True,related_name=' ...
- memcached subList序列化问题
某个业务场景需要将list超过10个元素时截取前10个然后再丢memcached缓存,因此写了这么一行代码 if(list.size()>10){ list=list.subList(0, 10 ...
- Intent启动系统组件（activity，service，BroadReceiver）-android学习之旅（四十九）
android提供了统一的编程模型Intent来启动系统的组件,这样提供了松耦合性.是一种mvc的编程模式 $(function () { $('pre.prettyprint code').each ...
- SpringMVC上传图片并压缩及剪切demo
/** * */ package com.up.controller; import java.awt.Image; import java.awt.image.BufferedImage; impo ...
- 1692: [Usaco2007 Dec]队列变换|后缀数组|贪心
将字符串翻转后接到原串的后面,中间加一个分隔符,每次都贪心选择rankrank小的那个 事实上就是练习一发后缀数组的模板 #include<algorithm> #include<i ...
- Node.js显示页面
首先我们先要下载并安装Nodejs,然后进入Node.js中安装supervisor, npm -g install supervisor -g表示全局模式 (无论windows哪一个用户登陆都可以使 ...
- python decorator 基础
一般来说,装饰器是一个函数,接受一个函数(或者类)作为参数,返回值也是也是一个函数(或者类).首先来看一个简单的例子: # -*- coding: utf-8 -*- def log_cost_tim ...