文档章节

CSS垂直居中的6种方法

小星星_cjx
 小星星_cjx
发布于 2017/05/03 09:55
字数 306
阅读 5
收藏 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
粉丝 1
博文 26
码字总数 24125
作品 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
31
0
前端秘籍,看程序员如何用九个招式,搞定css水平居中

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

ToEnd
05/11
0
0
16种方法实现水平居中垂直居中

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

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

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

huangpin815
2017/09/26
0
0
垂直居中方法总结

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

小王JOJO
2016/07/02
31
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

sklearn中predict_proba用法(注意和predict的区别)

参考网址:https://blog.csdn.net/m0_37870649/article/details/79549142 # 返回预测标签 print(clf.predict(x_test)) # 返回预测属于某标签的概率 print(clf.predict_proba(x_test))...

小叮当_加V
7分钟前
0
0
docker swarm创建consul集群

version: '3.6'x-consul: &consul image: consul:latest volumes: - consul:/consulvolumes: consul:services: client: <<: *consul ports: - "8500:......

weidedong
9分钟前
0
0
Git客户端(TortoiseGit)基本使用详解

1、 环境安装 Git最新版下载地址:https://gitforwindows.org/ TortoiseGit,Git客户端,32/64位最新版及对应的语言包下载地址:https://tortoisegit.org/download/ 安装的方法,一直下一步就...

hblt-j
15分钟前
0
0
服务发现比较:Consul vs Zookeeper vs Etcd vs Eureka

这里就平时经常用到的服务发现的产品进行下特性的对比,首先看下结论: Feature Consul zookeeper etcd euerka 服务健康检查 服务状态,内存,硬盘等 (弱)长连接,keepalive 连接心跳 可配支持...

lemonLove
15分钟前
0
0
1、ElasticSearch的安装配置和使用

一、安装 按照个人习惯我习惯把自己的软件都安装到opt下 解压 tar -zxvf elasticsearch-6.3.2.tar.gz 重命名 mv elasticsearch-6.3.2.tar.gz esearch 移动 mv elasticsearch-6.3.2.tar.gz /o...

丑陋的皮囊
17分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部