使用vertical-align实现垂直对齐
关于垂直对齐，之前研究过好几次了，但感觉每次都没研究透彻，做了几个效果，就觉得自己掌握了，实在是自欺欺人。真乃搞技术的大忌。
这两天又下定决心重新开始研究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实现垂直对齐的更多相关文章
- vertical-align表单元素垂直对齐
原文地址:http://www.blueidea.com/tech/web/2009/6910.asp 最近的项目涉及到很多表单的制作,特别是复选框(checkbox)和单选框(radio).但是在前 ...
- Xamarin.Android 水平对齐与垂直对齐
水平对齐: 1.LinearLayout添加属性:android:orientation="vertical": 2.元件添加属性:android:layout_gravity=& ...
- HTML 表格垂直对齐方式
HTML表格标记教程(25):行的垂直对齐属性VALIGN在垂直方向上,可以设定行的对齐方式,分别有居上.居中.居下3种.基本语法<TR VALIGN="TOP">&l ...
- vertical-align 属性设置元素的垂直对齐方式。
值 描述 baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶 ...
- 【css基础】文本对齐，水平对齐，垂直对齐
先说水平对齐,那首先想到的就是text-align了,text-align:left,text-align:center,text- align:right,代表的就是左对齐,居中对齐和右对齐,需要注 ...
- CSS之垂直对齐
vertical-align: baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text ...
- 垂直对齐：vertical-align：super属性
<p style=”vertical-align:super;”>垂直对齐<span>上标</span></p> <p>元素默认为块级元素, ...
- 【CSS学习】--- 文本水平对齐属性text-align和元素垂直对齐属性vertical-align
一.文本水平对齐属性---text-align text-align属性是将块级标签以及单元格里面的内容进行相应的对齐,块级标签里的内联元素会被整体进行移动,而子块级元素或子单元格则会继承父元素的te ...
- vertical-align垂直对齐用法
一.垂直对齐方式{vertical-align:middle/top/bottom:} <img>垂直对齐方式:1)给自身加vertical-align:再设置line-height即可: ...
随机推荐
- CentOS 6.5 伪分布安装
CentOS 6.5 伪分布安装 软件准备 jdk-6u24-linux-i586.bin .hadoop-1.2.1.tar.gz.hadoop-eclipse-plugin-1.2.1.jar ...
- Spring中ApplicationEvent和ApplicationListener封装
1.测试程序EventTest.java,发布一个事件只需要调用FrameEventHolder.publishEvent()方法即可. package com.junge.spring.event; ...
- node.js second day
create global link 使用全局模式安装的包不能直接通过require使用,但是nmp提供了一个 nmp link ,这个可以打破限制 $ nmp link [express] ./no ...
- MAC系统下用Idea创建spring boot工程 基于maven
1.创建项目 打开idea编辑器,选择file -> new -> project 点击next 依次填入group,artifact 填写完成之后再点击“next” 根据自己的需求在最 ...
- C#调用接口注意要点
在用C#调用接口的时候,遇到需要通过调用登录接口才能调用其他的接口,因为在其他的接口需要在登录的状态下保存Cookie值才能有权限调用, 所以首先需要通过调用登录接口来保存cookie值,再进行其他接 ...
- php根据修改时间删除指定目录下文件
//$dir-文件地址,$files-存储返回数组,$type-查找文件类型组 public function read_dir($dir,&$files,$type) { if(!is_di ...
- Google guava cache源码解析1--构建缓存器（1）
此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 1.guava cache 当下最常用最简单的本地缓存 线程安全的本地缓存 类似于ConcurrentHas ...
- 【CJOJ2375】 【HZOI 2015】偏序 II（cdq分治，树状数组）
传送门 CJOJ Solution 具体实现参考上一篇Blog(四维偏序) 代码实现1(cdq+cdq+cdq+BIT) /* mail: mleautomaton@foxmail.com autho ...
- LOJ#3052. 「十二省联考 2019」春节十二响（启发式合并）
题面 传送门 题解 先考虑一条链的情况,对于\(1\)号点来说,肯定是左子树中最大值和右子树中最大值一组,左子树中次大值和右子树中次大值一组--以此类推 那么如果不是一条链呢?我们把所有的链合并起来就 ...
- 初探日志框架Logback
一. 背景 最近因为学习项目时需要使用logback日志框架来打印日志, 使用过程中碰到很多的疑惑, 而且需要在控制台打印mybatis执行的sql语句, 于是决定沉下心来 研究一下logback的使 ...