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

这两天又下定决心重新开始研究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. hdu 4135 [a,b]中n互质数个数+容斥

    http://acm.hdu.edu.cn/showproblem.php?pid=4135 给定一个数n,求某个区间[a,b]内有多少数与这个数互质. 对于一个给定的区间,我们如果能够求出这个区间内 ...

  2. Android-okhttp

    在AndroidManifest.xml配置网络访问权限: <!-- 访问网络是危险的行为 所以需要权限 --> <uses-permission android:name=&quo ...

  3. yum安装jdk如何配置JAVA_HOME

    安装Java环境 yum -y install java-1.8.0-openjdk.x86_64 java-1.8.0-openjdk-devel.x86_64 查看安装后的配置 java -ver ...

  4. 使用System.Net.Mail中的SMTP发送邮件(带附件)

    System.Net.Mail 使用简单邮件传输协议SMTP异步发送邮件 想要实现SMTP发送邮件,你需要了解这些类 SmtpClient :使用配置文件设置来初始化 SmtpClient类的新实例. ...

  5. devexpress gridview 添加按钮

    #region 添加按钮事件 private RepositoryItemButtonEdit CreateRepositoryItemButtonEdit(Dictionary<object, ...

  6. [leetcode.com]算法题目 - Pow(x, n)

    Implement pow(x, n). class Solution { public: double pow(double x, int n) { // Start typing your C/C ...

  7. 阿里云ECS 介绍

    1.阿里云产品概述 1 2.阿里云基础架构介绍 2 3. ECS产品概念和功能 6 4. ECS运维管理和API 12 1.阿里云产品概述 2.阿里云基础架构介绍 ECS 主要有五个主要的组成部分 作 ...

  8. 【翻译】 Windows 内核漏洞学习—空指针解引用

    Windows Kernel Exploitation – NullPointer Dereference 原文地址:https://osandamalith.com/2017/06/22/windo ...

  9. storm安装以及简单操作

    storm的安装比较简单,下面以storm的单节点为例说明storm的安装步骤. 1.storm的下载 进入storm的官方网站http://storm.apache.org/,点击download按 ...

  10. JS获取浏览器URL中查询字符串的参数

    首先要知道Location这个对象以及这个对象中的一些属性: href:设置或返回完整的url.如本博客首页返回http://www.cnblogs.com/wymninja/ host:设置或返回主 ...