关于垂直对齐，之前研究过好几次了，但感觉每次都没研究透彻，做了几个效果，就觉得自己掌握了，实在是自欺欺人。真乃搞技术的大忌。

这两天又下定决心重新开始研究vertical-allign这个高深莫测的属性了，决定一举攻破城池。但由于这个属性牵扯到的东西实在太多，line-height、盒模型等，都是css中的难点。所以要彻底掌握要花好些时间了。

使用table-cell实现垂直对齐：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        div{

            display: table-cell;

            height: 10em;

            border: 1px solid #ccc;

            vertical-align: middle;

        }

        span{

            display: inline-block;

            vertical-align: middle;

        }

    </style>

</head>

<body>

    <div>

        <span>这是一个关于多行文字的垂直居中<br>这是第二行</span>

    </div>

</body>

</html>

使用after伪元素实现对齐：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        html,body,.box{

            margin: 0;

            height: 100%;

        }

        .box{

            width: 100vw;

            height: 100vh;

            text-align: center;

            background-color: rgba(0,0,0,.3);

        }

        .box:after{

            content: '';

            display: inline-block;

            width: 0;

            height: 100%;

            vertical-align: middle

        }

        img{

            vertical-align: middle

        }

    </style>

</head>

<body>

    <div class="box">

        <img src="img/1.jpg">

    </div>

</body>

</html>

使用vertical-align实现垂直对齐的更多相关文章

  1. vertical-align表单元素垂直对齐

    原文地址:http://www.blueidea.com/tech/web/2009/6910.asp 最近的项目涉及到很多表单的制作,特别是复选框(checkbox)和单选框(radio).但是在前 ...

  2. Xamarin.Android 水平对齐与垂直对齐

    水平对齐: 1.LinearLayout添加属性:android:orientation="vertical": 2.元件添加属性:android:layout_gravity=& ...

  3. HTML 表格垂直对齐方式

    HTML表格标记教程(25):行的垂直对齐属性VALIGN在垂直方向上,可以设定行的对齐方式,分别有居上.居中.居下3种.基本语法<TR VALIGN="TOP">&l ...

  4. vertical-align 属性设置元素的垂直对齐方式。

     值 描述 baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶 ...

  5. 【css基础】文本对齐，水平对齐，垂直对齐

    先说水平对齐,那首先想到的就是text-align了,text-align:left,text-align:center,text- align:right,代表的就是左对齐,居中对齐和右对齐,需要注 ...

  6. CSS之垂直对齐

    vertical-align: baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text ...

  7. 垂直对齐：vertical-align：super属性

    <p style=”vertical-align:super;”>垂直对齐<span>上标</span></p> <p>元素默认为块级元素, ...

  8. 【CSS学习】--- 文本水平对齐属性text-align和元素垂直对齐属性vertical-align

    一.文本水平对齐属性---text-align text-align属性是将块级标签以及单元格里面的内容进行相应的对齐,块级标签里的内联元素会被整体进行移动,而子块级元素或子单元格则会继承父元素的te ...

  9. vertical-align垂直对齐用法

    一.垂直对齐方式{vertical-align:middle/top/bottom:} <img>垂直对齐方式:1)给自身加vertical-align:再设置line-height即可: ...

随机推荐

  1. POJ 1191棋盘分割问题

    棋盘分割问题 题目大意,将一个棋盘分割成k-1个矩形,每个矩形都对应一个权值,让所有的权值最小求分法 很像区间DP,但是也不能说就是 我们只要想好了一个怎么变成两个,剩下的就好了,但是怎么变,就是变化 ...

  2. Excel VBA语句集

    Excel VBA语句集 引子 最近批阅学生成绩,用Excel 处理学生成绩,用到VBA 提高办公效率.需要经常查阅VBA的一些用法 正文 定制模块行为 (1) Option Explicit '强制 ...

  3. [Erlang02] 那些经历过的Erlang小坑1-10

    1. 保护式(guard)中如果出错,不会报错,只会返回false! case 1=:1 of true when not erlang:length(t) =:= 1 orelse true -&g ...

  4. jar包获取资源文件

    背景 写的一个spring boot项目打成jar包部署运行下,打成jar包,提示找不到资源文件,如下图: 直接通过idea是可以运行的,但打成jar包后提示找不到资源文件,简单查阅后了解到是因为ja ...

  5. Windows核心编程：第3章 内核对象

    Github https://github.com/gongluck/Windows-Core-Program.git //第3章 内核对象.cpp: 定义应用程序的入口点. // #include ...

  6. Swift5 语言指南(二十) 类型转换

    类型转换是一种检查实例类型的方法,或者将该实例视为与其自己的类层次结构中的其他位置不同的超类或子类. Swift中的类型转换是使用is和as运算符实现的.这两个运算符提供了一种简单而富有表现力的方法来 ...

  7. spring IOC理解

    用spring做了几个项目后发现,对spring的IOC理解还是不够清晰,今天就来总结下自己的理解(个人的一些见解) 以前用jsp+servlet做网站时,只是分了显示层(jsp),控制层(servl ...

  8. [原创]K8飞刀20150725 支持SOCKS5代理(内网渗透)

    工具: K8飞刀编译: 自己查壳组织: K8搞基大队[K8team]作者: K8拉登哥哥博客: http://qqhack8.blog.163.com发布: 2015/7/26 3:41:11 简介: ...

  9. odoo开发笔记-tree列表视图拖拽排序

    odoo列表tree视图 拖拽排序 实现效果: 实现方式: 模型中定义字段: class CusYourModel(models.Model): """ 你的模型 &qu ...

  10. 好用的在线工具汇总：Iconfont图标,数据mock,时间函数库，颜色查询 等

    一   时间函数库 ———http://momentjs.com/ 非常全的时间处理函数库,引入使用非常方便. 二   Iconfont———http://www.iconfont.cn/ 各种小图标 ...