<!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端常见布局---垂直居中布局 单元素定高的更多相关文章

  1. pc端常见布局---垂直居中布局 单元素不定高

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. pc端常见布局样式总结（针对常见的）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. css布局 - 垂直居中布局的一百种实现方式（更新中...）

    首先将垂直居中的现象和实现方式两大方向细分类如下: 接下来逐条累加不同情况下的垂直居中实现. 目录: 一.父元素高度固定时,单行文本 | 图片的垂直居中 1. line-height行高简单粗暴实现法 ...

  4. pc端常见布局---水平居中布局 单元素定宽

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. pc端常见布局---水平居中布局 单元素不定宽度

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 淘宝购物车页面 PC端和移动端实战

    最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...

  7. 在前端眼中pc端和移动的开发区别

    按照昨天所说,本包子今天将总结在前端开发中,pc端和移动端的区别,整理完这些区别,本包子将开始整理pc端的布局,会写实际的代码了,还是那句话,希望文章中有什么不足的地方,大家能多多指正,大家一起进步, ...

  8. PC端自适应布局

    截止目前,国内绝大多数内容为主的网站(知乎,果壳,V2EX,网易新闻等)均使用内容区定宽布局,大多数电商网站(网易考拉,京东,聚美优品)也使用了内容区定宽的布局,也有些网站使用了自适应布局: 天猫 内 ...

  9. 第 31 章 项目实战-PC 端固定布局[5]

    学习要点: 1.底部区域 2.说明区域 3.版权及证件区 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．底部区 ...

随机推荐

  1. [poj1986]Distance Queries(LCA)

    解题关键:LCA模板题 复杂度:$O(n\log n)$ #pragma comment(linker, "/STACK:1024000000,1024000000") #incl ...

  2. AngularJs(Part 3)--注册服务

    有以下5中方法注册一个AngularJS可以识别的Service value和constant是两个极其简单的方法,只有少数情况下会使用. service已经开始复杂了起来.而factory是我认为既 ...

  3. Poll:&nbsp;Most&nbsp;Americans&amp;n…

    Most Americans support tough new measures to counter gun violence, including banning assault weapons ...

  4. 6、scala面向对象-对象

    一.对象 1.object object,相当于class的单个实例,通常在里面放一些静态的field或者method,第一次调用object的方法时,就会执行object的constructor, ...

  5. Unity中场景异步加载

    引入命名空间 using UnityEngine.UI; using UnityEngine.SceneManagement; using System.Collections; using Syst ...

  6. E20190419-hm

    diagram n. 图表; 示意图; 图解; [数] 线图; contingency n. 意外事故,偶发事件; 可能性,偶然性; [审计] 意外开支; crash v. 碰撞; 使发出巨响; 暴跌 ...

  7. 3dmax沿立方体边扩展出面

    这个做法有问题,接缝问题处理起来很麻烦,立方体与平面的拼接基本就做不到 做建筑时,一般先做墙,然后通过墙扩展出地表,这么做可以保证墙和地表是一体的,避免产生缝隙 1 新建2个Cube 2 转换为可编辑 ...

  8. Hadoop 2.7.3 HA 搭建及遇到的一些问题

    看了Hadoop的一个7天视频教程,里面给出了搭建的详细步骤,教程中是按2.4.1版本搭建的,我用的是2.7.3版本,好像没什么差别.下面是抄过来的,加了一点注释. hadoop2.0已经发布了稳定版 ...

  9. bzoj 4788: [CERC2016]Bipartite Blanket【hall定理+状压】

    考虑当前合法的一个点集s,如果他合法,那么一定有一个完备匹配的点集包含这个点集,也就是两边都满足hall定理的话这两边拼起来的点集也满足要求 所以分别状压两边点集用hall定理转移判断当前点集是否合法 ...

  10. jq：静态页面常会用到的jq操作(记录)

    1 在php的mvc模式中通常需要做数据异步处理,其中也包含了对htm页面的操作,下面是近期长用到的jq操作,后续会继续补充 2 3 1:修改input框的value值 4 <input typ ...