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 端固定布局来实现. 一．底部区 ...
随机推荐
- chromium浏览器开发系列第五篇：Debugging with WinDBG
Windbg 相信windows开发的人都知道,有些人用的溜儿溜儿的,有个crash,直接拿这个工具一分析,就定位出来了.非常好用.以前有个同事,做sdk开发 的,会各种命令.来北京后,还去过微软面试 ...
- nginx中有关命令和日志切割，配置文件加载的详细阐述
一．Nginx简介 Nginx (“engine x”) 是俄罗斯人Igor Sysoev(塞索耶夫)编写的一款高性能的 HTTP 和反向代理服务器.Nginx 已经在俄罗斯最大的门户网站── Ram ...
- Ajax的属性
1.属性列表 url: (默认: 当前页地址) 发送请求的地址. type: (默认: "GET") 请求方式 ("POST" 或 "GET ...
- 《精通Spring4.X企业应用开发实战》读后感第五章（方法注入）
- pyjsonrpc模块使用
pyjsonrpc模块的远程过程调用方法. # -*- coding:utf-8 -*- #!/usr/bin/env python2.7 # @Author : tianbao # @Contact ...
- Scrapy：Python的爬虫框架【转摘】
网络爬虫,是在网上进行数据抓取的程序,使用它能够抓取特定网页的HTML数据.虽然我们利用一些库开发一个爬虫程序,但是使用框架可以大大提高效率,缩短开发时间.Scrapy是一个使用Python编写的,轻 ...
- react中循环节点的方式以及图片引用的方式
import React from 'react' import img from '../public/img/001.jpg' // 此时img是一个变量,在下面直接使用该变量即可引入该图片 cl ...
- 转载-聊一聊深度学习的activation function
目录 1. 背景 2. 深度学习中常见的激活函数 2.1 Sigmoid函数 2.2 tanh函数 2.3 ReLU函数 2.4 Leaky ReLu函数 2.5 ELU(Exponential Li ...
- [NOIP2008] 传球游戏
1011. [NOIP2008] 传球游戏 http://cogs.pro/cogs/problem/problem.php?pid=1011 ★ 输入文件:ballg.in 输出文件:bal ...
- Spring Boot Dubbo 构建分布式服务
概述: 节点角色说明 节点 角色说明 Provider 暴露服务的服务提供方 Consumer 调用远程服务的服务消费方 Registry 服务注册与发现的注册中心 Monitor 统计服务的调用次数 ...