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

这两天又下定决心重新开始研究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 4920

    http://acm.hdu.edu.cn/showproblem.php?pid=4920 给定两个n阶矩阵,求矩阵相乘后模3. 直接搞肯定会超时 特殊处理1和2的情况 实际上是水过的..... 貌 ...

  2. git命令行的操作实例教程

    Git 常用命令常用命令 创建新仓库 创建新文件夹,打开,然后执行 git init 1 以创建新的 git 仓库. 检出仓库 执行如下命令以创建一个本地仓库的克隆版本: git clone /pat ...

  3. 10 个免费的Bootstrap Admin 主题，模板收集

    In designing websites today, one of the must have frameworks is the twitter bootstrap. To those who ...

  4. CentOS7下gitlab的搭建

    gitlab的搭建 安装基础包 yum -y install curl policycoreutils openssh-server openssh-clients 启动sshd systemctl ...

  5. 曲苑杂坛--DML操作中如何处理那些未提交的数据

    对数据库稍有了解的人,数据库使用排他锁X锁来避免两个事务同时修改同一条数据,同时使用较低级别如行上加锁来提高并发度. 以下了两种场景很容易理解: 1>事务1执行 UPDATE TB1 SET C ...

  6. Python 学习第三部分函数——第一章函数基础

    函数是python 为了代码最大程度的重用和最小代码冗余而提供的最基本的程序结构.使用它我们可以将复杂的系统分解为可管理的部件. 函数相关语句 def...          创建一个对象并将其赋值给 ...

  7. IIS伪静态配置，使用URLRewriter实现伪静态

    前段时间开发公司官网,用到了URLRewriter实现伪静态,在VS调试模式下没有任何问题,部署到IIS上后总是提示404的错误,查了很久才知道IIS需要做相应的配置才能实现动态跳转的功能,现将IIS ...

  8. win10 17025 触摸bug

    This article is written in both English and Chinese. 本文使用中文和英文两个版本. 在 win10 的 17025 可以容易让 UWP 触摸失效.做 ...

  9. 【PHP】当mysql遇上PHP

    博客提纲 利用PHP连接mySQL数据库 两套接口:面向对象和面向过程 实现写改删查(CUBD)实例 通过prepare语句处理相同类型的不同SQL语句 通过bind_param()绑定参数,及相关注 ...

  10. 一分钟学会git

    首先 克隆 源码地址 git clone git://github.com/jquery/jquery.git 更新 git pull查看状态 git status暂存所有(注意 . 表示全部暂存) ...