文档章节

元素水平居中和垂直居中的几种简单方法

小陈同学
 小陈同学
发布于 2014/05/07 21:02
字数 307
阅读 135
收藏 3

一、如何使元素在水平方向上居中

1. 使用text-align:center。

    在父级元素的CSS样式设置text-align:center。把内部嵌套一个div把它当作文本来对待,不过这个方法有时候是不管用的。

2.在需要居中的元素设置margin:0 auto。

    这句CSS的意思为:设置margin-left和margin-right为自动适应父级元素宽度。所以可以使元素水平居中,不过记得设置其width。

二、如何使元素在垂直方向上居中

1.使图片在垂直方向上居中。

    div{backgroud-position:0 50%} 。当然,这只适用于背景图!

2.使只含文本的元素居中。

    在css里设置它的行高:line-height:xx px。 xx为其本身height值。

3.使包含文本和其他元素都同时居中。

    仅仅设置行高是不够的,应该再加上display:table-cell;vertical-align:middle.这样就可以使其垂直居中。

我以上提到的都是常用的方法,不全面,也没深入讲。还有用CSS expression方法实现水平居中的等等方法。

© 著作权归作者所有

共有 人打赏支持
小陈同学
粉丝 5
博文 15
码字总数 6892
作品 0
成都
程序员
私信 提问
加载中

评论(3)

小陈同学
小陈同学

引用来自“wp0615032”的评论

vertical-align:middle 需要在table-cell里面
恩 谢谢
penggy
penggy
vertical-align:middle 需要在table-cell里面
睡觉谁教谁叫呢
睡觉谁教谁叫呢
陈陈,我是洋洋
css实现水平、垂直居中的几种方法

用text-align: center来实现水平居中(只能实现文本的水平居中) //html<div class="center"> 文本水平居中</div>//css.center{width: 200px;height: 100px;background-color: #a036b4; text......

lironghua
2014/05/07
0
0
关于CSS制作水平/垂直居中对齐问题

作为前端开发者,在制作Web页面时都有碰到CSS制作水平垂直居中的问题,我想大家都有研究过或者写过,特别是其中的垂直居中,更是让人烦恼。这段时间,我收集了几种不同的方式制作水平/垂直居...

ACE-705
2014/05/07
0
0
探究 HTML元素的水平垂直居中

HTML: <body> <div class="maxbox"> <div class="minbox align-center"></div> </div></body> 父元素 .maxbox{ position: relative; width: 500px; height: 500px; margin: 5px; box-shado......

我输过但从未怕过
2016/03/04
19
0
16种方法实现水平居中垂直居中

熟悉水平居中和垂直居中的方法, 不为别的, 就为用的时候能够信手拈来. 下面直接步入正题. 水平居中 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中. 若是块级元素...

tomzhangto
2017/12/19
0
0
CSS实现元素水平/垂直居中的方法

首先,我们来了解水平居中,它有很多种方法,我们暂时先来了解其中的几种: 1. 在实现方案中,我们最熟悉的莫过于给元素定义一个宽度,然后使用margin: body{ width:960px; margin:0 auto;}...

xiuhong
2014/05/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

js中原型模式

原型模式就是用克隆对象来创建对象的,在es6中提供了Object.create方法来克隆对象 在不支持该方法的浏览器中,可以使用以下代码: Object.create = Object.create || function (obj) { ...

莫西摩西
18分钟前
0
0
ORACLE插入insert带where条件

ORACLE插入带条件 insert into THIRD_PAYEE_ACCOUNT_DETAIL t (id, collection_mode, t.store_code) select Third_Payee_Account_Detail_Seq.Nextval,'006','A05K' from dual where not......

Cobbage
28分钟前
0
0
分享几张Java架构大牛总结的架构知识脑图

前言 系统架构师是一个既需要掌控整体又需要洞悉局部瓶颈并依据具体的业务场景给出解决方案的团队领导型人物。一个架构师得需要足够的想像力,能把各种目标需求进行不同维度的扩展,为目标客户...

Java-飞鱼
35分钟前
10
0
2019BATJ面试题详解:MyBatis+MySQL+Spring+Redis+多线程

这里为大家分享一些面试的一手资料,供大家迎接接下来的金三银四跳槽季 Spring Spring 概述 什么是spring? 使用Spring框架的好处是什么? Spring由哪些模块组成? 解释AOP模块 Spring配置文件...

别打我会飞
38分钟前
2
0
首场百度大脑开放日来袭 | 全新开放24项AI技术

活动当天,百度AI技术生态部总经理喻友平,就百度大脑平台与生态进行了全面的详解,同时展示了百度大脑开放平台Q1核心升级内容,包括语音技术、视觉技术、自然语言处理、知识图谱等通用AI能力...

PaddleWeekly
39分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部