CSS实现不固定宽度和高度的自动居中
有时候我们需要实现下面这种效果:
嘎嘎,撑大高度不让你剧中
嘎嘎,撑大高度不让你剧中
嘎嘎,撑大高度不让你剧中
嘎嘎,撑大高度不让你剧中
嘎嘎,撑大高度不让你剧中
嘎嘎,撑大高度不让你剧中
直接上代码:
html:
<div class="main">
<div class="left">
嘎嘎,撑大高度不让你剧中
<br/> 嘎嘎,撑大高度不让你剧中
<br/> 嘎嘎,撑大高度不让你剧中
<br/> 嘎嘎,撑大高度不让你剧中
<br/> 嘎嘎,撑大高度不让你剧中
<br/> 嘎嘎,撑大高度不让你剧中
<br/> 嘎嘎,撑大高度不让你剧中
<br/>
</div>
<div class="right">
<span>我要居中</span>
</div>
</div>
css:
* {
padding: 0;
margin: 0;
}
.main {
width: 100%;
display: table;
}
.left {
text-align: center;
vertical-align: middle;
display: table-cell;
width: 50%;
box-sizing: border-box;
border: 1px solid #ddd;
}
.right {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 50%;
box-sizing: border-box;
border: 1px solid #ddd;
//针对ie6的hack
_position: absolute;
_top: 50%;
}
.right span {
//针对ie6的hack
_position: relative;
_top: -50%;
}
由 ie6 hack 想到的 内容不确定高度宽度的居中:
html:
<div class="center-main">
<div class="center-content">
<span>内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中,内容居中, 内容居中,内容居中,内容居中,内容居中</span>
</div>
</div>
css:
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
.center-main {
width: 100%;
height: 100%;
position: absolute;
}
.center-content {
position: relative;
text-align: center;
top: 50%;
}
.content span {
top: -50%;
}
CSS实现不固定宽度和高度的自动居中的更多相关文章
- 纯CSS实现侧边栏/分栏高度自动相等
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=694 一.为何要分栏高 ...
- 右边根据左边的高度自动居中只需要两行CSS就可以完成
右边根据左边的高度自动居中只需要两行CSS就可以完成 <style type="text/css" > div{ display: inline-block; vert ...
- CSS,让100%的宽度,自动减10,让100%的高度,自动减10,可以加减乘除
CSS,让100%的宽度,自动减10,让100%的高度,自动减10,可以加减乘除 实例: .add{ width: calc(100% - 10px); height: calc(100% - 10p ...
- DIV+CSS左右两列自适应高度的方法
我们在用DIV+CSS布局网页的时候,必然会遇到左右两列自适应高度的问题,就是左边列的背景会随着右边列内容的增加也相应的增加高度,下面就教大家DIV+CSS左右两列自适应高度的方法. 下面给出最终的效 ...
- 盒子模型、网页自动居中、float浮动与清除、横向两列布局
1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img in ...
- div中宽高度自适应文字换行居中问题解决
<html> <head> <meta charset="UTF-8"/> <title>div中宽高度自适应文字换行居中demo& ...
- gVim 启动时窗口自动居中
最近折腾 vim, 除了配置巨麻烦外, 另一个很蛋疼的就是窗口位置问题了, 折腾了半天无法启动时自动居中, 找遍各地也只有保存上次位置, 下次启动时恢复的方法 废话不多说, 直接上代码, 丢到 vim ...
- 纯CSS兑现侧边栏/分栏高度自动相等(转)
这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法.核心的CSS代码如下(数值不固定): margin-bottom:-3000px; padding-bottom:3000px; 再配合父标签的 ...
- css如何实现一个元素高度固定宽度按比例显示?
用padding-top百分比可以实现宽度固定高度按比例展示,现在的需求是对一个video视频的盒子div高度是固定的,宽度如何按比例展示? 解决后效果如图: 红框标注的即是我在上面高度比例固定的范围 ...
随机推荐
- 称球问题(zt)
下面说的这个问题可能大家都看到过,它是这么描述的: 现在有n(n>=2)个球,n个球外观一模一样,但是重量有区别,其中有且仅有一个球的重量比其它n-1个球要重,现在有一个天平,天平是完好无损的, ...
- python邮件发送接收
接收邮件 import poplib,pdb,email,re,time from email import header POP_ADDR = r'pop.126.com' USER = '' PA ...
- javaScript入门--引用类型
前面提到过,引用类型的值便是对象,在ECMAScript中,引用类型是一种数据结构,用于将数据和功能组织在一起,而对象则是某个特定引用类型的实例. var a=new Object(); 上面便声明了 ...
- FTP服务详解
FTP服务 本章机构 简介 File Transfer Protocol(文件传输协议)的英文简称,而中文简称为"文件传输协议".用于Internet上的控制文件的双向传输.同时, ...
- 解析$.grep()源码及透过$.grep()看(两次取反)!!的作用
先上jquery源码: grep: function( elems, callback, inv ) { var retVal, ret = [], i = 0, length = elems.len ...
- [BigData]关于Hadoop学习笔记第三天(PPT总结)(一)
课程安排 MapReduce原理*** MapReduce执行过程** 数据类型与格式*** Writable接口与序列化机制*** ---------------------------加深拓展- ...
- ubuntu共享文件夹给virtualbox
在ubuntu或者linuxmint等linux系统下安装了virtualbox,可以通过共享文件夹的方式,把文件夹共享给virtualbox下的虚拟机系统,我这里的虚拟机系统是win7,共享过程如下 ...
- Ajax发送FormData对象封装的表单数据
前端页面: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...
- 整合Spring与Hibernate
在学习spring的时候,要整合hibernate,本来是看起来挺简单的,但是遇到的远要比想到了多,而且多很多,期间几天一个bug实在难调,几度放弃,但终究柳暗花明,抑制不住喜悦就想着分享一下成果吧. ...
- 把mvc4彻底搞定(一)
1 .net web开发方式 webform开发 asp.net mvc开发 2 请求模式 webform方式:客户端向服务端请求一个aspx页面,服务端生成一个页面对象类,调用这个页面对象类的PR方 ...