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 端固定布局来实现. 一．底部区 ...
随机推荐
- java 对象锁和类锁的区别（转）
java 对象锁和类锁的区别 转自; ) ); ; ) ); 上述的代码,第一个方法时用了同步代码块的方式进行同步,传入的对象实例是this,表明是当前对象,当然,如果需要同步其他对象实例,也不可 ...
- PCL推荐的命名规范(1)
博客转载自:http://www.pclcn.org/study/shownews.php?lang=cn&id=209 文件命名 所有的文件名单词之间应该用下划线隔开,例 如unordere ...
- 《精通Spring4.X企业应用开发实战》读后感第五章（注入参数详解）
- 使用c语言实现的常用函数
/* 为了面试准备的,有些在工作中也可以用用,本人算法方面比较欠缺,如果有更优秀的算法麻烦告诉我啊 */ /* strcat的实现 */ #include <assert.h> char* ...
- Spring入门第九课
使用外部属性文件 在配置文件里面配置Bean时,有时需要在Bean的配置里面混入系统部署的细节信息(例如:文件路径,数据源配置信息等)而这些部署细节实际上需要和Bean配置相分离. Spring提供了 ...
- Netty入门系列(3) --使用Netty进行编解码的操作
前言 何为编解码,通俗的来说,我们需要将一串文本信息从A发送到B并且将这段文本进行加工处理,如:A将信息文本信息编码为2进制信息进行传输.B接受到的消息是一串2进制信息,需要将其解码为文本信息才能正常 ...
- CodeForces - 820
Mister B and Book ReadingCodeForces - 820A 题意:C,V0,V1,A,L..总共有C页书,第一天以V0速度读,每天加A,但是不能超过V1,并且要从前一天的看到 ...
- B-Tree深入理解
定义: 根节点至少包括两个孩子 树中每个节点最多含有m个孩子(m>=2) 除根节点和叶子节点外,其他每个节点字少有(ceil(m/2):去上线),个孩子. 所有叶子节点都位于同一高度 假设每个非 ...
- 10.Python初窥门径(函数进阶)
Python(函数进阶) 一.函数的传参(接上期) 形参角度(一共四种,后两种) 动态参数(万能参数)* # 定义一个函数时,*所有的位置参数聚合到一个元组中 def func(*args): # * ...
- Python数据科学手册Seaborn马拉松可视化里时分秒转化为秒数的问题
Python数据科学手册Seaborn马拉松可视化里时分秒转化为秒数的问题 问题描述: 我实在是太懒了,问题描述抄的网上的哈哈哈:https://www.jianshu.com/p/6ab7afa05 ...