<!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. Java日志:集成slf4j和logback

    Java日志方案有很多,包括:java.util.logging.Apache的commons-logging和log4j.slf4j以及logback. 一个大型项目会用到众多第三方jar包,这些j ...

  2. phpstrom添加monokai-sublime主题

    phpstrom默认的主题看起来不是特别舒服,sublime的主题却相当养眼,搜索之后,大为惊喜. 下载地址:https://github.com/sumiaowen/jetbrains-monoka ...

  3. shader之顶点着色器

    Vertex Shader 是渲染管道中一个可编程的模块,用于处理独立的顶点.Vertex Shader接收Vertex Attribute Data,由定点数组对象通过渲染指令来生成. Vertex ...

  4. 写守护进程时碰到open函数的参数，没记住

    今天写一个最简单的守护进程, 要成为一个守护进程,其实很简单了.主要步骤就4步: 1,创建进程. 2,父进程退出. 3,成为会话的头领进程. 4,将工作目录改成根目录,并把标准输入输出重定向到空设备. ...

  5. js基础（补10.10）

    1.内嵌式: <html> <head> <title></title> </head> <body> <a href=& ...

  6. 《剑指offer》面试题21—包含min函数的栈

    题目:定义栈数据结构,并在该数据结构中实现一个能获得栈最小元素的函数min.要求push,min,pop时间都是O(1). 思路:要用一个辅助栈,每次有新元素压栈时辅助栈压入当前最小元素:min函数直 ...

  7. header元素 footer元素 hgroup元素

    header元素 header元素是一种具有引航和导航作用的结构元素, 通常用来放置整个页面或页面内的一个内容区块的标题, 但是也可以包含其他内容, 例如数据表格,搜索表单, 或相关的logo图片 h ...

  8. Shaderlab blend

    http://www.cnblogs.com/daxiaxiaohao/p/4059310.html 1.不透明度 当我们要将两个半透的纹理贴图到一个材质球上的时候就遇到混合的问题,由于前面的知识我们 ...

  9. 最短路(floyd/dijkstra/bellmanford/spaf 模板)

    floyd/dijkstra/bellmanford/spaf 模板: 1. floyd(不能处理负权环,时间复杂度为O(n^3), 空间复杂度为O(n^2)) floyd算法的本质是dp,用dp[k ...

  10. JAVAFX-1 开发应用

    为什么用javafx? 写这个专题的目的,其实也是好玩,原来的熟悉的使用swing 来开发java中的gui程序,其实早就知道有javafx 这个东西的,一致没有时间的玩,最近有时间所以学习.这个专题 ...