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

这两天又下定决心重新开始研究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 2642 Stars 【二维树状数组】

    题目 题目大意:Yifenfei是一个浪漫的人,他喜欢数天上的星星.为了使问题变得更容易,我们假设天空是一个二维平面,上面的星星有时会亮,有时会发暗.最开始,没有明亮的星星在天空中,然后将给出一些信息 ...

  2. [ 9.10 ]CF每日一题系列—— 186A模拟处理字符串

    Description: 跟你两个不相同的字符串,问你能否将第一个字符串任意两个字母交换一次使得两字符串相同,YES or NO Solution: 一维模拟就好了 #include <iost ...

  3. SRM473

    250pt: 题意:在二维平面上,给定3种,左转.右转,以及前进一步,的指令序列循环执行,问整个移动过程是否是发散的. 思路:直接模拟一个周期,然后判断1.方向是否和初始时不同 2.是否在原来的点 满 ...

  4. Visualise the Argyris basis functions

    """ Author: kinnala Visualise the Argyris basis functions. """ from sk ...

  5. centos7安装mantis

    安装mantis的步骤如下: 1. 安装apache, mysql等必要软件 1 #yum update 2 #yum install httpd php php-pdo php-mysql php- ...

  6. nginx实现unigui群集

    nginx实现unigui群集 在笔者写此文的时候,UNIGUI1.50.x的版本已经发布,其提供的HyperServer已经支持群集. 有网友还专门为此做了群集方面的测试: 从上图可以看出:群集总共 ...

  7. 判断闰年的Java算法

    判断方法 普通年能被4整除且不能被100整除的为闰年. 世纪年能被400整除的是闰年 对于数值很大的年份,这年如果能整除3200,并且能整除172800则是闰年.如172800年是闰年,86400年不 ...

  8. 【vue】项目编译报错‘npm ERR! **@**dev: `webpack-dev-server --inline --progress --config ’’

    关于npm ERR! **@**dev: `webpack-dev-server --inline --progress --config‘ 原因:这是新版webpack存在的BUG,卸载现有的新版本 ...

  9. 读取型CSRF-需要交互的内容劫持

    本文作者:i春秋作家——jing0102 前言 最近在挖洞,"实践出真知"这句话说的很对,在实际挖掘过程中我会思考很多东西,跟朋友一起准备做一份手册,忽然的想到了一些漏洞的定义和规 ...

  10. POI读写海量Excel

    目前处理Excel的开源javaAPI主要有两种,一是Jxl(JavaExcel API),Jxl只支持Excel2003以下的版本.另外一种是Apache的Jakarta POI,相比于Jxl,PO ...