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.其他元素 ...
随机推荐
- python抓取NBA现役球员基本信息数据
链接:http://china.nba.com/playerindex/ 所需获取JSON数据页面链接:http://china.nba.com/static/data/league/playerli ...
- SharePoint 2016 文档库的新功能简介
今天,重装了一下SharePoint 2016,想多了解了解,看到一些自己平时没注意的功能,或者新的功能,分享一下给大家. 1.界面上操作的变换,多了一排按钮,更像SharePoint Online了 ...
- OSS项目进度（2.19）
前两周先后完成了OSS.Common ,OSS.Http ,OSS.Social 项目的.net standard支持,再次开始进入框架本身的开发,今天进度情况: 一.OSS.Social 完成摇一摇 ...
- WebSockets介绍
Web sockets定义为在servers和clients之间的双向连接.意味着servers和clients可以同时交流并发送数据.这种协议是从底层就是双工连接.Web sockets技术上得到了 ...
- 基于Quartz.NET框架的WinForm任务计划管理工具
最近接到一个小需求 ——可以定期同步20个Sql Server 7.0数据库里的数据(数据量会预计>10000),并保存为cvs格式文件 ——可以设置保存文件数据量 ——该应用需要用WinFor ...
- UWP: 体验应用内购新接口——StoreContext类
Windows 1607 版本(内部版本 14393)之后,微软在 SDK 添加了一些与应用商店相关的新接口,像应用试用与购买.应用内购等.这些接口相对于原来的接口要方便很多.就拿应用内购来说,以前的 ...
- 前端数据统计用做Bootstrap的一些柱状图、饼状图和折线图案例
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootstrap ...
- Spring Cache扩展：注解失效时间+主动刷新缓存
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- js原生Ajax 的封装和原理
原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...
- Action的创建和配置
计应134(实验班) 李佳鸿 Action类—Struts组件 在RequestProcessor类预处理请求时,在创建了Action的实例后,就调用自身的processActionPerform() ...