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 端固定布局来实现. 一．底部区 ...
随机推荐
- Linux命令总结_sort排序命令
1.sort命令是帮我们依据不同的数据类型进行排序,其语法及常用参数格式: sort [-bcfMnrtk][源文件][-o 输出文件] 补充说明:sort可针对文本文件的内容,以行为单位 ...
- STM in Clojure
Transactional memory in Clojure is implemented using Multiversion Concurrency Control protocol http: ...
- HDU - 2689 Sort it与2016蓝桥杯B 交换瓶子 排序（相邻交换与任意交换）
Sort it You want to processe a sequence of n distinct integers by swapping two adjacent sequence ele ...
- 《剑指offer》面试题8—旋转数组的最小数字
题目:把一个数组最开始的若干个元素搬到数组末尾我们称之为数组的旋转.要求:输入一个递增排序的数组的旋转,输出旋转数组中的最小数字.例如{3,4,5,1,2}是{1,2,3,4,5}的一个旋转,该数组的 ...
- xrange与range之间的区别
对于这两个好像功能都差不多,这两个经常会被搞混,所以今天一定要把这个完全弄清楚. 首先我们看看range: range([start,] stop[, step]),根据start与stop指定的范围 ...
- org.apache.commons.httpclient和org.apache.http.client区别(转)
官网说明: http://hc.apache.org/httpclient-3.x/ Commons HttpClient项目现已结束,不再开发.它已被其HttpClient和HttpCore模块中的 ...
- 运行Spark程序的几种模式
一. local 模式 -- 所有程序都运行在一个JVM中,主要用于开发时测试 无需开启任何服务,可直接运行 ./bin/run-example 或 ./bin/spark-submit 如: ...
- 洛谷P3434 [POI2006]KRA-The Disks
P3434 [POI2006]KRA-The Disks 题目描述 For his birthday present little Johnny has received from his paren ...
- Prefix.pch文件的用法
我们知道,每新建立一个工程,比如说HelloWord,在分类SupportingFiles里都会有一个以工程名开头-Prefix.pch结尾的文件,如HelloWord-Prefix.pch.对于这个 ...
- CentOS6.7 i686上安装JDK7
内核版本: [root@heima01 java]# uname -a Linux heima01 2.6.32-573.el6.i686 #1 SMP Thu Jul 23 12:37:35 UTC ...