<!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. Python的subprocess子进程和管道进行交互

    在很久以前,我写了一个系列,Python和C和C++的交互,如下 http://blog.csdn.net/marising/archive/2008/08/28/2845339.aspx 目的是解决 ...

  2. C++ std::pair

    pair是将2个数据组合成一个数据,当需要这样的需求时就可以使用pair,如stl中的map就是将key和value放在一起来保存.另一个应用是,当一个函数需要返回2个数据的时候,可以选择pair. ...

  3. 当在hive中show&nbsp;table&nbsp;…

    当在hive中show table 时如果报以下错时 FAILED: Error in metadata: javax.jdo.JDODataStoreException: Error(s) were ...

  4. Linux&nbsp;JDK1.4卸载与1.6的安装

    Linux JDK卸载与安装 一.jdk1.4卸载 Redhat Enterprise 5 中自带安装了jdk1.4,在安装jdk1.6前,把jdk1.4卸载: 1.首先查看系统自带JDK的版本: [ ...

  5. [yii]Trying to get property of non-object

    今天接触gridview的时候,发现总是报错,如图. array( 'name'=>'user_info.userinfo', 'value'=>'$data->user_info- ...

  6. linux下使用c判断文件夹是否为空的小程序

    自己写了一个 判断文件夹是否为空的小代码 //文件夹操作相关的函数的帮助$: man 3 readdir #include <stdio.h> #include <sys/types ...

  7. appium运行遇到的坑01

    ..... File "build\bdist.win32\egg\appium\webdriver\errorhandler.py", line 29, in check_res ...

  8. 启动Eclipse时，出现 “Failed to load the JNI shared library "C:\Program Files\java\jdk1.7.....\jvm.dll"

    原因1:给定目录下jvm.dll不存在. 解决方法:(1)重新安装jre或者jdk并配置好环境变量. (2)copy一个jvm.dll放在该目录下. 原因2:eclipse的版本与jre或者jdk版本 ...

  9. vue中axios开启cookies

  10. Django之Form组件归类

    目录: Django内置字段 Django内置插件 常用选择插件 创建Form类时,主要涉及到 [字段] 和 [插件],字段用于对用户请求数据的验证,插件用于自动生成HTML; Field requi ...