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 端固定布局来实现. 一．底部区 ...
随机推荐
- 再学IHanlder 类----------------关于Asp.net与iis原理网上看博客收获写一个验证码用一般处理程序记的好长时间前就写过不过现在再看有点不一样的感觉
建一个web网站 新建一般处理程序直接贴代码: using System;using System.Collections.Generic;using System.Linq;using System ...
- 爬虫之BeautifulSoup， CSS
1. Beautiful Soup的简介 2. Beautiful Soup 安装 可以利用 pip 或者 easy_install 来安装,以下两种方法均可 easy_install beautif ...
- nodebrew的安装与使用
创建: 2019/05/10 安装 brew install nodebrew 初始化 nodebrew setup ~/.bash_profile 里添加 export PATH=/usr/loc ...
- memcached 扩展安装（windows）
在脚本之家里下载扩展压缩包 https://www.jb51.net/softs/392873.html 安装扩展前得先安装memcached并启动 下载完扩展压缩包解压并找到对应自己php版本 复制 ...
- Kbengine
Kbengine 编辑 KBEngine是一款开源的游戏服务端引擎,使用简单的约定协议就能够使客户端与服务端进行交互, 使用KBEngine插件能够快速与(Unity3D, OGRE, Cocos2d ...
- spring-eureka 源码解读----作为集群的eureka怎么样实现不做二次传播
在平时工作中,eureka作为一个集群时候,我们会配置多个peer ,假设当前有服务器eureka-A,eureka-B,eureka-C. 如果Eureka A的peer指向了B, B的peer指向 ...
- 求10000以内n的阶乘（openjudge 2923）
求10000以内n的阶乘 总时间限制: 5000ms 内存限制: 655360kB 描述 求10000以内n的阶乘. 输入 只有一行输入,整数n(0<=n<=10000). 输出 一行 ...
- Glassfish DeploymentException: Error in linking security policy for
http://stackoverflow.com/questions/7322476/glassfish-deploymentexception-error-in-linking-security-p ...
- JS高级学习历程-16
[正则表达式] 1()小括号使用 作用:① 提高表达式优先级关系 ② 提取子字符串内容 模式单元,每个小括号都算作一个模式单元内容,按照内容的下标可以给小括号计数. var reg = /([0-9 ...
- jsp页面包含的几中方式
(1)include指令 include指令告诉容器:复制被包含文件汇总的所有内容,再把它粘贴到这个文件中. <%@ include file="Header.jsp"%&g ...