文档章节

常见的垂直居中布局方式

ali安东尼
 ali安东尼
发布于 2017/07/05 14:39
字数 343
阅读 2
收藏 0
点赞 0
评论 0

上一篇介绍了水平居中的方法,在这一篇我们将介绍垂直居中的方法。 display:table-cell与vertical-align: middle 无论元素是行内元素,还是块元素,均可以通过设置display:table-cell;和vertical-align: middle,则可实现元素居中。若元素是行内元素,那么就在其自身里面设置这两个特性;若元素是块元素,那么就在其父元素里面设置。

flex弹性布局 上一篇介绍怎么使用flex实现元素的水平居中布局,类似地,也可以使用flex实现垂直居中布局。设置如下:

.son{ display: flex;
align-items:Center; } 如果需要同时实现水平以及垂直的居中,则在样式里面同时设置justify-content:center;和align-items:Center;。

除了以上的方法,还可以通过flex与margin的结合实现,具体设置如下:

.parent{ display: flex; text-align: center; height:100px; background:red; }

.parent span{ margin:auto; } 绝对定位position 使用绝对定位的方式也能实现垂直居中,设置如下:

div{ width: 50%; height: 50%; background: red; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
} 通过margin:auto和top,left,right,bottom都设置为0实现居中。不过这里得确定内部元素的高度,可以用百分比。

由睿江云提供,想了解更多,请登陆www.eflycloud.com

© 著作权归作者所有

共有 人打赏支持
ali安东尼
粉丝 3
博文 192
码字总数 173101
作品 0
广州
由 Bootstrap 的媒体对象(Media object) 谈 flexbox

CSS3 弹性盒子(flexbox),是一种新的布局方式。使用 flexbox,可以很方便的实现常见的布局以及居中效果。Bootstrap v4 的 Media object 也是使用 flexbox 来实现。flexbox 相关的属性较多,本...

2017/12/18
0
0
CSS布局总结

显示方式 元素的display显示方式有多种,隐藏,块级,内联,内联-块级 1、隐藏 display:none使得被选择的元素隐藏,并且不占用原来的位置。 2、块级 display:block; 表示块级元素块级元素会...

小衰哥有点帅
2017/09/24
7
0
垂直居中实现方式总结

在网页制作过程中,我们经常要用到图片、文字的垂直居中。今天总结一下垂直居中的方法。 方法一 利用 实现垂直居中 这种方法适用于单行文本垂直居中,如果文本内容太长,出现了换行,换行后的...

呵呵闯
2016/12/05
16
0
如何让div中的内容垂直居中

虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直...

文文1
2015/09/21
25.5K
0
Android五布局——线性布局LinearLayout

1、线性布局: 在res->layout->activity_main.xml文件中,如果有LinearLayout控件,其中可添加控件,则这些控件的布局就是线性布局。 2、LinearLayout: LinnearLayout是线性布局控件,它包含...

落叶-归根
2016/07/19
10
0
[译文]CSS的水平/垂直居中:一篇完整的指南

原文:Centering in CSS: A Complete Guide 在CSS中居中是(开发者)抱怨CSS设计的代表问题之一。有人嘲笑说:这有什么困难的呢?我认为,难度不在于解决问题,而在于有如此多的不同解决方法...

huangpin815
2017/09/26
0
0
垂直居中实现方式总结

在网页制作过程中,我们经常要用到图片、文字的垂直居中。今天总结一下垂直居中的方法。 方法一 利用 实现垂直居中 这种方法适用于单行文本垂直居中,如果文本内容太长,出现了换行,换行后的...

musishui
2016/11/09
1K
1
Android布局--LinearLayout

LinearLayout是线性布局控件,它包含的子控件将以横向或竖向的方式排列。 1.LinearLayout的常用属性 该属性决定其他子类控件的排布方式(vertical垂直;horizontal水平) 该属性决定其他子类...

大道无名
2016/09/21
5
0
布局神器(一)display:table-cell

display:table-cell 页面布局是HTML+CSS的一个重点,除了常见的几种布局外,如:float、position: absolute等等;还有一些功能强大且好用的布局方式,本文就display:table-cell做学习总结...

即将离
2016/07/17
0
0
android:layout_gravity 居中布局

垂直(vertical)的LinearLayout布局内无法通过控件的android:layoutgravity=""进行垂直居中,可以水平居中。 水平(horizontal)的LinearLayout布局内无法通过控件的android:layoutgravity...

元来元去
2011/12/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

java按比例之原图生成缩略图

package com.wxp.test; import java.awt.Image; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileOutputStream; import javax.imageio.ImageIO; import sun.......

恋码之子
9分钟前
0
0
SpringCloud 微服务 (十五) 服务容错 Hystrix

壹 工作中的微服务架构,某个服务通常会被多个服务调用或者多层调用完成需求,如果某个服务不可用,导致一个系统功能不可用或者服务直接没用了的情况,这种情况称为雪崩效应 有A服务调用B服务,B服...

___大侠
11分钟前
0
0
Spring框架中的设计模式(五)

Spring框架中的设计模式(五) 通过以前的4篇文章,我们看到Spring采用了大量的关于创建和结构方面的设计模式。本文将描述属于行为方面的两种设计模式:命令和访问者。 前传: Spring框架中的...

瑞查德-Jack
14分钟前
0
0
解决phpstorm运行很卡问题!

phpStorm一旦达到这个临界值,所有智能提示、自动补全都失效了 这TM就很尴尬了,顿时感觉自己就是个废人了,纯手写代码跟便秘一样 众所周知phpStorm基于JAVA,那么这个内存限制肯定跟JAVA的虚...

sjcehui2010
17分钟前
0
0
javascript前端AES加密解密

参考了一下网上的代码加上自已的一些想法,修改,key也可以是中文, 要引入一个aes.js的js文件。 html代码 <html> <head> <title>AES加解密</title> <meta http-equiv="Content-Type"......

oisan_
21分钟前
0
0
MacOS和Linux内核的区别

有些人可能认为MacOS和Linux内核有相似之处,因为它们可以处理类似的命令和类似的软件。甚至有人认为苹果的MacOS是基于linux的。事实上,这两个内核的历史和特性是非常不同的。今天,我们来看...

六库科技
25分钟前
0
0
Vue.js-自定义事件例子

自定义组件的 v-model 2.2.0+ 新增 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。m...

tianyawhl
28分钟前
0
0
mybatis中获取sqlSession的源码分析

0 SqlSessionFactoryBuilder类 SqlSessionFactoryBuilder sqlSessionFacotory=SqlSessionFactoryBuilder().build(reader) public SqlSessionFactory build(Reader reader) { return build(re......

writeademo
29分钟前
0
0
RobotThread.cpp

#include "RobotThread.h"RobotThread::RobotThread(int argc, char** pArgv, const char * topic) :m_Init_argc(argc), m_pInit_argv(pArgv), m_topic(topic){/** ......

itfanr
31分钟前
0
0
防御ddos攻击的常见方法

DDoS攻击是一种特殊形式的拒绝服务攻击。它利用多台已经被攻击者所控制的机器对某一台单机发起攻击,在带宽相对的情况下,被攻击的主机很容易失去反应能力。分布式拒绝服务攻击(DDoS) 是一种...

上树的熊
31分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部