div内部元素居中
要让div内部元素垂直居中，则给div加上此css样式：
.div-vertical-middle{
height:200px;
width:304px;
line-height:50px;
vertical-align:middle;
display:table-cell;
}
要让div内部元素水平居中，则给div加上此css样式：
.div-horizontal-middle{
height:200px;
width:304px;
line-height:50px;
text-align:center;
display:table;
}
下面是一段demo：
<html>
<head>
<title>居中测试</title>
<style>
*{
margin:0;
padding:0;
}
.div-vertical-middle{
height:200px;
width:304px;
line-height:50px;
vertical-align:middle;
display:table-cell;
}
.div-horizontal-middle{
height:200px;
width:304px;
line-height:50px;
text-align:center;
display:table;
}
.div-middle-out{
border:2px solid #000;
width:500px;
height:500px;
margin:50px auto;
display:table;
}
.div-middle-in{
text-align:center;
display:table-cell;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="div-vertical-middle" style="background:yellow;">
<h2>这是垂直居中</h2>
</div>
<div class="div-horizontal-middle" style="background:red;">
<h2>这是水平居中</h2>
</div>
<div class="div-middle-out" style="background:green;">
<div class="div-middle-in">
<h2>水平垂直居中</h2>
</div>
</div>
</body>
</html>
div内部元素居中的更多相关文章
- css固定宽高DIV内部元素垂直居中的方法
应用案例 案例是这样的,一个外层div,高宽是固定的,但是里面内容不是固定的.很多朋友的做法是头部加一个padding或者margin,这样,里面内容显得貌似是居中了,但是假如内容变化,这样头部的固定 ...
- HTML/CSS：div居中和div内部元素垂直居中（1）
div居中 div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果 1. div水平居中:设置marg ...
- <转载>使CSS文字图片div元素居中方法之水平居中的几个方法
文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...
- Div 内部所有元素 全部垂直对齐
http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div How it works: ...
- 如何居中div？如何居中一个浮动元素？
如何居中div? 给div设置一个宽度,然后添加margin:0 auto属性 div{ width:200px; margin:0 auto; } 如何居中一个浮动元素? <!DOCTYPE ...
- Vue在点击内部元素时（获得焦点），怎样让外部div元素样式变化？
问题: div内部有很多元素,div. p. span .input等,各元素有嵌套,现在点击某元素时需要最外面这个div边框高亮,例如,点击了input开始输入 假设html 结构如下 <d ...
- CSS实现元素居中原理解析
在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了.但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人. 让元素水平居中相对比较简单:如果它是一个行内元素,就对它的 ...
- css菜鸟学习之text-align属性，行内元素，块级元素居中详解
一.text-align属性 1.text-align用来设置元素中的的文本对齐方式,例如:如果需要设置图片的对齐方式,需要设置图片的父元素的text-align属性: 2.text-align只对文 ...
- Bootstrap 元素居中设置
一.Bootstrap水平居中 1. 文本:class ="text-center" 2. 图片居中:class = "center-block" 3.其他元素 ...
随机推荐
- Java程序测试之线程的同步
package tickect; class ticketnum implements Runnable { public int tickets = 100; String str = new St ...
- gulp+browser-sync使用方法
gulp简介 gulp是基于流的自动化构建工具,也就是说gulp是通过操作流实现自动编译,压缩文件等操作的.这得益于node.js对流的支持,当然gulp.js和构建的任务文件都是JavaScript ...
- 2月22日 《从Paxos到Zookeeper 分布式一致性原理与实践》读后感
zk的特点: 分布式一致性的解决方案,包括:顺序一致性,原子性,单一视图,可靠性,实时性 zk的基本概念: 集群角色:not Master/Slave,is Leader/Follower/Obser ...
- BZOJ 1337: 最小圆覆盖1336: [Balkan2002]Alien最小圆覆盖（随机增量法）
今天才知道有一种东西叫随机增量法就来学了= = 挺神奇的= = A.令ci为包括前i个点的最小圆，若第i+1个点无法被ci覆盖，则第i+1个点一定在ci+1上 B.令ci为包括前i个点的最小圆且p在边 ...
- git合并别的分支某次提交或合并
合并别的分支某次提交 master分支上改了一个bug.提交到master分支.现在在dev分支上开发,需要把master分支上改的那个bug合过来.步骤是:先在master分支上查改那个bug的SH ...
- 本人开发的JavaWeb急速框架Blast上线了
JAVA 急速WEB框架Blast --对JavaWeb的学习性框架,参考了spring的实现 --阅读Blast源码可以快速掌握JavaWeb常用技术和方法论,并付诸实践 Blast 是基于 Jav ...
- JS日期加减指定天数
JS中没有直接操作日期加减的方法,只能通过Date对象获取当前天数加减之后setDate,以此来达到操作日期的目的 JS中对指定日期加减指定天数,具体方法如下: function addDate(da ...
- JS入门（三）
数据的类型转换: 之前提到过,js中数据类型分两种, 基本数据类型string number boolean undefined null 复杂数据类型 对象 Date Array ...
- 3408: [Usaco2009 Oct]Heat Wave 热浪
3408: [Usaco2009 Oct]Heat Wave 热浪 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 67 Solved: 55[Subm ...
- 1197: [HNOI2006]花仙子的魔法
1197: [HNOI2006]花仙子的魔法 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 762 Solved: 443[Submit][Stat ...