文档章节

CSS垂直居中的6种方法

小星星_cjx
 小星星_cjx
发布于 2017/05/03 09:55
字数 306
阅读 5
收藏 0
点赞 0
评论 0

1、单行文本垂直居中

html:

<div id="parent">
    <div id="child"> 
        text here
    </div>
</div>

css:

.child{line-height: 200px}

    垂直居中一张图片

html:

<div class="parent">
    <img src="image.png" alt="">
</div>

css:

.parent{line-height: 200px;border:1px solid #000;}
.parent img{vertical-align: middle}

2、css table 方法

html:

<div class="parent">
    <div class="child">text here</div>
</div>

css:

.parent{display: table;border: 1px solid #000;height: 100px;}
.child{display: table-cell;vertical-align: middle}

 低版本的IE fix bug:

.child{display:inline-block}

3、absolute positioning and negative margin,块级元素

html:

<div class="parent">
    <div id="child"> 
        text here
    </div>
</div>

 css:

.parent{position:relative;border: 1px solid #000;height: 100px;width: 400px;}
.child{position: absolute;top:50px;left: 200px;height: 30px;width: 50px;
       border: 1px solid #000;margin: -15px 0 0 -25px;}
    

4、absolute positioning  and stretching,通用,>=IE7版本

html:

<div class="parent">
    <div id="child"> 
        text here
    </div>
</div>

css:

.parent{position:relative;border: 1px solid #000;height: 100px;width: 400px;}
.child{position: absolute;top:0;left: 0;right: 0;bottom:0;height: 30px;width: 50px;
       border: 1px solid #000;margin: auto;}
    

 5、equal top and bottom padding,通用

html:

<div class="parent">
    <div id="child"> 
        text here
    </div>
</div>

css:

.parent{padding: 5% 0;border: 1px solid #000;height: 100px;width: 400px;}
.child{padding: 10% 0;height: 30px;width: 50px;border: 1px solid #000;margin: 0 auto;}

6、float div 通用

html:

<div class="parent">
    <div class="floater"></div>
    <div class="child">text here</div>
</div>

css:

.parent{border: 1px solid #000;height: 250px;width: 400px;}
.floater{float: left;height:50%;width: 100%;margin-bottom: -50px;}
.child{clear:both;height: 100px;border:1px solid #000;}

 

© 著作权归作者所有

共有 人打赏支持
小星星_cjx
粉丝 0
博文 15
码字总数 18529
作品 0
广州
前端工程师
一些CSS方面的知识

1.学习CSS"盒子模型"(上):http://www.108js.com/article/article8/80058.html?id=1766 2.学习CSS"盒子模型"(下):http://www.108js.com/article/article8/80059.html?id=1767 3.css知多......

IT追寻者 ⋅ 2016/06/23 ⋅ 0

前端秘籍,看程序员如何用九个招式,搞定css水平居中

CSS水平居中 text-align:center是前端工程师的基本功,我在项目中经常遇到CSS水平居中的需求,这篇教程将我以往用过的9种CSS实现水平居中的方法总结出来,也方便日后再用到时回顾。 工具/原料...

ToEnd ⋅ 05/11 ⋅ 0

关于CSS中的水平/垂直居中问题

关于css中的水平、垂直居中问题,我想大家也经常遇到过,而且这也是实用性比较高的用法,那么究竟有多少种方法呢?这边编者就做个小小的总结,有什么不足之处,还望大家多多指出。。。 一、横...

FT_Christ ⋅ 2014/05/06 ⋅ 0

16种方法实现水平居中垂直居中

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

tomzhangto ⋅ 2017/12/19 ⋅ 0

[译文]CSS的水平/垂直居中:一篇完整的指南

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

huangpin815 ⋅ 2017/09/26 ⋅ 0

垂直居中方法总结

今天根据客户的修改意见,修改一组有带有缩略图片的标题的列表,图片在列表的最左边,图片的大小是固定的.要求是,标题字数如果过多的话,可以折成两行.但是要求垂直居中.最后解决了这个问题,但是...

小王JOJO ⋅ 2016/07/02 ⋅ 0

DIV垂直居中的各种方法

在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”,其实水平居中实现还是比较简单的,反而垂直居中有点麻烦,因为我们设计页面的时候往往水平宽度都是固定的。因此我...

alexian ⋅ 2010/10/28 ⋅ 0

css 实现单行文本 多行文本垂直居中

在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是...

LorinLuo ⋅ 2015/11/26 ⋅ 0

元素居中的N种方式

水平居中 <1>行内元素的居中 被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。 <2>块状元素的居中 当被设置元素为 块状元素 时用 text-align...

_YM雨蒙 ⋅ 2017/08/16 ⋅ 0

DIV+CSS让文字垂直居中

也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,...

晨曦之光 ⋅ 2012/05/16 ⋅ 1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

三步为你的App集成LivePhoto功能

摘要:LivePhoto是iOS9新推出的一种拍照方式,类似于拍摄Gif图或录制视频片段生成图片。如果没有画面感,可以联想《哈利波特》霍格沃茨城堡的壁画,哈哈,很炫酷有木有,但坑爹的是只有iphone6S以...

壹峰 ⋅ 19分钟前 ⋅ 0

centos7 git安装

由于centos中的源仓库中git不是最新版本,需要进行源码安装。 1、查看yum仓库git信息 [root@iZm5e3d4r5i5ml889vh6esZ zh]# yum info gitLoaded plugins: fastestmirrorLoading mirror s...

xixingzhe ⋅ 28分钟前 ⋅ 0

input file 重复上传同一张图片失效的解决办法

解决办法 方法一:来回切换input[type='file']的type属性值,可以是‘text’,'button','button'....,然后再切换回来‘file’ 方法二:每次取消图片预览后,重置input[type='file']的value的...

时刻在奔跑 ⋅ 28分钟前 ⋅ 0

Mahout推荐算法API详解

前言 用Mahout来构建推荐系统,是一件既简单又困难的事情。简单是因为Mahout完整地封装了“协同过滤”算法,并实现了并行化,提供非常简单的API接口;困难是因为我们不了解算法细节,很难去根...

xiaomin0322 ⋅ 33分钟前 ⋅ 0

WampServer默认web服务器根目录位置

安装WampServer之后的web服务器根目录默认位置在WampServer安装目录下的www:

临江仙卜算子 ⋅ 34分钟前 ⋅ 0

Redux的一些手法记录

Redux Redux的基本概念见另一篇文。 这里记录一下Redux在项目中的实际操作的手法。 actions 首先定义action.js,actions的type,可以另起一个action-type.js文件。 action-type.js用来存...

LinearLaw ⋅ 35分钟前 ⋅ 0

android 手势检测(左右滑动、上下滑动)

GestureDetector类可以让我们快速的处理手势事件,如点击,滑动等。 使用GestureDetector分三步: 1. 定义GestureDetector类 2. 初始化手势类,同时设置手势监听 3. 将touch事件交给gesture...

王先森oO ⋅ 50分钟前 ⋅ 0

java 方法的执行时间监控 设置超时(Future 接口)

java 方法的执行时间监控 设置超时(Future 接口) import java.util.concurrent.Callable; import java.util.concurrent.ExecutionException; import java.util.concurrent.Executor......

青峰Jun19er ⋅ 54分钟前 ⋅ 0

一名开源小白的Apache成长自述

今天收到了来自Apache Vote我成为Serviceomb项目Committer的邮件,代表自己的贡献得到了充分的肯定;除了感谢团队的给力支持,我更希望将自己的成长经历——如何践行Apache Way的心得介绍给大...

微服务框架 ⋅ 56分钟前 ⋅ 0

vim介绍、颜色显示和移动光标、一般模式下复制、剪切和粘贴

1.vim 是 vi 的升级版 vim 是带有颜色显示的 mini安装的系统,一般都不带有vim [root@aminglinux-128 ~]# yum install -y vim-enhanced已加载插件:fastestmirror, langpacksLoading mir...

oschina130111 ⋅ 57分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部