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

这两天又下定决心重新开始研究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. Apache Flink 漫谈系列

    阿里云讲Flink的,还是蛮不错 https://yq.aliyun.com/articles/666043?spm=a2c4e.11153940.blogcont679659.23.9fae56e7 ...

  2. [zjoi2010]cheese

    题目: 贪吃的老鼠(cheese.c/cpp/pas/in/out) 时限:每个测试点10秒 [问题描述] 奶酪店里最近出现了m只老鼠!它们的目标就是把生产出来的所有奶酪都吃掉.奶酪店中一天会生产n块 ...

  3. RPC、RMI、SOAP、WSDL的区别详解

    RPC与RMI的区别============================================================================RPC:(Remote Pr ...

  4. Java设计模式详尽资料

    设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...

  5. glob

    主要是用来在匹配文件,相当shell中用通配符匹配. 用法: glob.glob(pathname) # 返回匹配的文件作为一个列表返回 glob.iglob(pathname) # 匹配到的文件名, ...

  6. 第5件事 做一个有taste的产品人

    1.taste的意思是品位,也就是说产品经理应该是一个有品位的产品人.什么叫品位呢?品位指的是对事物有分辨与鉴赏的能力.品位是形象的展示,品位是内在气质的复出,品位是人生价值的体验,品位是道德修养的内 ...

  7. mysql 返回结果按照指定的id顺序返回

    mysql> ,,,,) order by field(id,,,,,) limit ,; +----+-------+------+ | id | name | sex | +----+--- ...

  8. 常见配置redis.conf介绍

    参数说明redis.conf 配置项说明如下:1. Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程  daemonize no2. 当Redis以守护进程方式运行 ...

  9. Python建代理配合burp实现自动免费用水

    i春秋作家:凉风有信 Hi , 我是凉风 半年不见了啊,我又回来了因为太菜都不好意思发文章了 0×00 目录 0×01 前言0×02 利用fd分析与实战0×03 Python+burp简易搭建代理服务 ...

  10. Info - Get technical information from the Internet

    Official Sites Overview / QuickStart Guide / Docs / E-books Community / Fourm / Blog Demo / Download ...