CSS中垂直居中的方法
昨天总结了css中水平居中的方法,今天来总结一下css中实现垂直居中的方法。
- line-height
line-height用于实现单行文本的垂直居中,如下图中,我们要求单行文本垂直居中,只需要将div2设置行高line-height和height的值相同即可,也可以不用设置高度,因为单行文本的行高会撑开高度,其实二者就是一样的值。
但是这种方法有个不足之处,那就是如果文字内容的长度大于块的宽度时,就有一部分内容脱离了块,因为就不再是单行文本了,所以此方法只适用于单行文本。
还有一个方法就是,如果不设置元素height的情况下,那么本身就是元素包裹着内容,这时候只要将padding-top与padding-bottom设置为相同的值,同样是垂直居中的效果,而且这种方法对多行文本等都通用。
- vertical-align:middle
通过设置vertical-align:middle也可以实现垂直居中,但它有以下几种情况:
如下图,div2中同时又inline和inline-block元素,我们没有给div2设置高度时,它的高度由图片的高度撑开,而且图片和文本显示在一行,但我们发现图片下方有空隙,这是因为inline-block自带vertical-align属性,而且是默认值baseline。现在我们把vertical-align设置为middle,就会呈现出垂直居中的效果。(vertical-align属性只对拥有valign特性的html元素起作用,例如表格元素中的<td><th>等等,而像<div><span>这样的元素是不行的。)
但是当我们给div2设置了高度之后,vertical-align:middle就不起作用了。要加上inline-height之后才可以。
当容器里只有文字没有图片时,还可以利用 display 和 vertical-align 对容器里的文字实现垂直居中。通过将父元素的display设置为table-cell,并设置vertical-align:middle,可使其子元素均实现垂直居中,这和表格里单元格的垂直居中是类似的。
- 新增一个基准元素
在div2之前新增一个基准元素,设置它的高度等于父元素高度一半,之后再给要垂直居中的元素设置margin-top的值的大小是负的它自身高度,在设置line-height,则实现了垂直居中。
- 绝对定位实现垂直居中
因为绝对定位元素具有伸缩性,所以如果我们将绝对定位元素的width设置为auto时,同时把left与right设置为0,那么元素就会将其相对的父元素水平填充满。这时如果我们把高度设置为固定值,margin为auto的前提下,只要 top和 bottom 的值相等(或都为0),且不超过其相对元素减去该绝对定位元素height 的一半,就可以实现垂直居中了。
CSS中垂直居中的方法的更多相关文章
- CSS中各种居中方法
CSS中各种居中方法,本文回顾一下,便于后续的使用. 水平居中方法 1.行内元素居中 行内元素居中是只针对行内元素的,比如文本(text).图片(img).按钮等行内元素,可通过给父元素设置 text ...
- 利用css来让一个div在页面中垂直居中的方法
一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就 ...
- 转: css实现垂直居中的方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 用 CSS 实现垂直居中并不容易.有些方法在一些浏览器中 ...
- CSS中水平居中的方法
居中是我们在css中经常遇到的问题,一般有水平居中.垂直居中.垂直水平居中这3种情况,那么今天首先就来对学习到的水平居中的方法做个总结笔记. css水平居中 text-align:center 它的效 ...
- css实现垂直居中的方法整理
1.表格布局法.(利用表格的显示模式)需要用到一些冗余的 HTML 元素,因此这里不多介绍. 2.行内块法.也不作讨论,因为在我看来这种方法 hack 的味道很浓. 如果你有兴趣,可以去看看 Chri ...
- css水平垂直居中的方法与 vertical-align 的用法
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 1. 已知元素宽度 方法一:已知宽高,可以用position定位 + margin负值的方法 : 绝对定位 ...
- CSS中各种各样居中方法的总结
在开发前端页面的时候,元素的居中是一个永远都绕不开的问题.看似简单的居中二字,其实蕴含着许许多多的情况,对应着很多的处理方法,本文就试图对页面布局中的居中问题进行总结~~ 居中问题分为水平居中和竖直居 ...
- CSS水平垂直居中的方法
原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...
- 介绍一种css水平垂直居中的方法(非常好用!)
这次介绍一下一个水平垂直居中的css方法,这个方法可以说是百试百灵,废话不多说,直接附上代码: html,body{ width:100%; height:100%; } 你需要居中的元素{ posi ...
随机推荐
- poj 2034 Anti-prime Sequences(dfs)
//相邻的 2.3......d 之和都要不为素数 # include <algorithm> # include <stdio.h> using namespace std; ...
- Mongodb 3.4 + Centos6.5 配置 + mysql.sql转为csv 或 json导入和导出Mongo (64位系统)
Centos下通过yum安装步骤如下: 声明:相对比那些用源码安装,少了配置和新建log和data目录,这种简单粗暴, ,创建仓库文件, vi /etc/yum.repos.d/mongodb-org ...
- XML约束(3)
本节要点: 了解XML的约束模式 了解DTD 了解Schema 1 了解XML的约束模式 计算机程序在处理XML文档之前,必须能够解析出XML文档的内容中各个元素的相关信息.将解析出来的信息再交给下游 ...
- Java加载资源文件的两种方法
处理配置文件对于Java程序员来说再常见不过了,不管是Servlet,Spring,抑或是Structs,都需要与配置文件打交道.Java将配置文件当作一种资源(resource)来处理,并且提供了两 ...
- XMind常用快捷方式汇总
快捷键(Windows) 快捷键(Mac) 描述 Ctrl+N Command+N 建立新工作簿 Ctrl+O Command+O 开启工作簿 Ctrl+S Command+S 储存目前工作簿 Ctr ...
- sublime text 3配置使用python
1. 在sublime text的官网下载,是适合自己系统的版本.官网地址:https://www.sublimetext.com/3 2. 安装好后,在菜单栏打开:Preferences---> ...
- 聚集索引VS非聚集索引
聚集索引VS非聚集索引 SQL Server 2014 发布日期: 2016年12月 索引是与表或视图关联的磁盘上结构,可以加快从表或视图中检索行的速度. 索引包含由表或视图中的一列或多列生成的键. ...
- python作用域与命名空间
什么是命名空间 比如有一个学校,有10个班级,在7班和8班中都有一个叫“小王”的同学,如果在学校的广播中呼叫“小王”时,7班和8班中的这2个人就纳闷了,你是喊谁呢!!!如果是“7班的小王”的话,那么就 ...
- iOS 多线程 之 GCD(大中枢派发)(一)
导语: 本文个人原创,转载请注明出处(http://www.cnblogs.com/pretty-guy/p/8126981.html) 在iOS开发中多线程操作通常是一下3种,本文着重介绍Dispa ...
- iOS 科学计数法保留N位有效数字
iOS开发 项目中用到了将一个很大的数值转换成科学计数法的需求,转换成科学计数法的方式在iOS中其实是很好做的,使用NSNumber 的 kCFNumberFormatterScientificSty ...