pc端常见布局---垂直居中布局 单元素定高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常见元素布局</title>
<style type="text/css">
/* 一、垂直居中布局 */
/* 1.单个元素垂直居中 高度固定 缺点:用到定位，脱离文档流*/
.content {
position: relative;
height: 100px;
background: #008000;/* background和height测试更好的观看效果 */
} .box {
height: 50px;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
background: #ff9933;
color: #fff; /* background和color测试更好的观看效果 */
line-height: 50px; /* 文字垂直居中 */
}
</style>
</head>
<body>
<div class="content">
<div class="box">
高度固定
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常见元素布局</title>
<style type="text/css">
/* 一、垂直居中布局 */
/* 2.单个元素垂直居中 高度固定 记得父容器设置了行高，子类要记得重置行高*/
.content {
height: 100px;
line-height: 100px;
background: #008000;/* background测试更好的观看效果 可忽略*/
} .box {
display: inline-block;
height: 50px;
vertical-align: middle;
background: #ff9933;
color: #fff;/* background和color测试更好的观看效果 */
line-height: 50px;/* 文字垂直居中 */
}
</style>
</head>
<body>
<div class="content">
<div class="box">
高度固定
</div>
</div>
</body>
</html>
效果：
pc端常见布局---垂直居中布局 单元素定高的更多相关文章
- pc端常见布局---垂直居中布局 单元素不定高
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- pc端常见布局样式总结（针对常见的）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- css布局 - 垂直居中布局的一百种实现方式（更新中...）
首先将垂直居中的现象和实现方式两大方向细分类如下: 接下来逐条累加不同情况下的垂直居中实现. 目录: 一.父元素高度固定时,单行文本 | 图片的垂直居中 1. line-height行高简单粗暴实现法 ...
- pc端常见布局---水平居中布局 单元素定宽
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- pc端常见布局---水平居中布局 单元素不定宽度
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 淘宝购物车页面 PC端和移动端实战
最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...
- 在前端眼中pc端和移动的开发区别
按照昨天所说,本包子今天将总结在前端开发中,pc端和移动端的区别,整理完这些区别,本包子将开始整理pc端的布局,会写实际的代码了,还是那句话,希望文章中有什么不足的地方,大家能多多指正,大家一起进步, ...
- PC端自适应布局
截止目前,国内绝大多数内容为主的网站(知乎,果壳,V2EX,网易新闻等)均使用内容区定宽布局,大多数电商网站(网易考拉,京东,聚美优品)也使用了内容区定宽的布局,也有些网站使用了自适应布局: 天猫 内 ...
- 第 31 章 项目实战-PC 端固定布局[5]
学习要点: 1.底部区域 2.说明区域 3.版权及证件区 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．底部区 ...
随机推荐
- Repeater 和 GridView 添加序列号
<tr><asp:Repeater ID="rptOfBrowerInfo" runat="server" > <Heade ...
- SQL Server中的聚集索引(clustered index) 和 非聚集索引 (non-clustered index)
本文转载自 http://blog.csdn.net/ak913/article/details/8026743 面试时经常问到的问题: 1. 什么是聚合索引(clustered index) / ...
- 4.xpath注入详解
0x01 简介 XPath注入攻击是指利用XPath 解析器的松散输入和容错特性,能够在 URL.表单或其它信息上附带恶意的XPath 查询代码,以获得权限信息的访问权并更改这些信息.XPath注入发 ...
- HDU - 6383 百度之星2018初赛B 1004 p1m2（二分答案）
p1m2 Accepts: 1003 Submissions: 4595 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072 ...
- 漫画：深入浅出 ES 模块
本文来自网易云社区. 本文翻译自:ES modules: A cartoon deep-dive ES 模块为 JavaScript 提供了官方标准化的模块系统.然而,这中间经历了一些时间 —— 近 ...
- Go语言入门——数组、切片和映射
按照以往开一些专题的风格,第一篇一般都是“从HelloWorld开始” 但是对于Go,思来想去,感觉真的从“HelloWorld”说起,压根撑不住一篇的篇幅,因为Go的HelloWorld太简单了. ...
- Spring Security 表达式(Expressions) - hasRole示例
1.概述 Spring Security使用强大的Spring Expression Language(SpEL)提供各种各样的表达式.大多数这些Security表达式是针对上下文对象(当前经过身份验 ...
- 洛谷P2029 跳舞
P2029 跳舞 题目描述 小明今天得到一个跳舞毯游戏程序Dance.游戏每次连续出N个移动的“箭头”,箭头依次标号为1到N,并且的相应的分数S[1..N].如果你能“踏中”第i号箭头,你将获得相应的 ...
- 关于fiddler抓取HTTPS请求443的问题
1.环境:fiddler4.IOS10.3以上 2.需求:使用fiddler抓取IOS上的https请求 3.解决方案 步骤一:设置fiddler 步骤二:手机端安装证书 手机设置代理,打开手机浏览器 ...
- 判断iphone 屏幕大小宏定义
#define IS_IPAD (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) #define IS_IPHONE (UI_USER_I ...