div垂直居中的几种方式_div垂直水平居中

div垂直居中的几种方式_div垂直水平居中利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-aligncenter,块级元素设置其本身的left和rightmargins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法,每一种适用于不同的情况,在实际的使用过程中选择某一种方法即可。Line-HeightMethod试用:单行文本垂直居中,demo代码:

大家好,又见面了,我是你们的朋友全栈君。

利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法,每一种适用于不同的情况,在实际的使用过程中选择某一种方法即可。

Line-Height Method

line height demo
试用:单行文本垂直居中,demo

代码:

html

1
2
3
<div id="parent">
<div id="child">Text here</div>
</div>

css

1
2
3
#child {
        
        
line-height: 200px;
}

垂直居中一张图片,代码如下

html

1
2
3
<div id="parent">
<img src="image.png" alt="" />
</div>

css

1
2
3
4
5
6
#parent {
        
        
line-height: 200px;
}
#parent img {
        
        
vertical-align: middle;
}

CSS Table Method

table cell demo

适用:通用,demo

代码:

html

1
2
3
<div id="parent">
<div id="child">Content here</div>
</div>

css

1
2
3
4
5
#parent {
        
        display: table;}
#child {
        
        
display: table-cell;
vertical-align: middle;
}

低版本 IE fix bug:

1
2
3
#child {
        
        
display: inline-block;
}

Absolute Positioning and Negative Margin

absolute positioning and negative margin demo

适用:块级元素,demo

代码:

html

1
2
3
<div id="parent">
<div id="child">Content here</div>
</div>

css

1
2
3
4
5
6
7
8
9
#parent {
        
        position: relative;}
#child {
        
        
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}

Absolute Positioning and Stretching

absolute positioning and vertical stretching demo

适用:通用,但在IE版本低于7时不能正常工作,demo

代码:

html

1
2
3
<div id="parent">
<div id="child">Content here</div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
#parent {
        
        position: relative;}
#child {
        
        
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}

Equal Top and Bottom Padding

vertical centering with padding demo

适用:通用,demo

代码:

html

1
2
3
<div id="parent">
<div id="child">Content here</div>
</div>

css

1
2
3
4
5
6
#parent {
        
        
padding: 5% 0;
}
#child {
        
        
padding: 10% 0;
}

Floater Div

vertical centering with floater div demo

适用:通用,demo

代码:

html

1
2
3
4
<div id="parent">
<div id="floater"></div>
<div id="child">Content here</div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
#parent {
        
        height: 250px;}
#floater {
        
        
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
}
#child {
        
        
clear: both;
height: 100px;
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/124702.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 非局部均值滤波算法[通俗易懂]

    非局部均值滤波算法[通俗易懂]2016.09.09更新,修改了SSIM中值太大的问题首先谈一下什么是非局部均值滤波。在此之前,我们先来看一下均值滤波的原理。均值滤波均值滤波的计算非常简单,将图像像素点灰度记录在数组中,然后设置方框半径的值,然后将方框中的所有点的像素求和取平均,得到的结果就是均值滤波后对应像素点的灰度值。优点:计算很快而且简单从算法可以看出,只是求了平均,并没有很复杂的计算缺点:得到的图像很模

  • js判断是否包含指定字符串_js判断字符串是否相等

    js判断是否包含指定字符串_js判断字符串是否相等js判断字符串是否包含某个字符串方法一:includes方法//str.includes(“”)返回一个布尔值,值为true时表示包含varstr=”helloworld”;if(str.includes(“world”)){alert(“Hi,world”);}方法二:indexOf方法varstr=”123456″;if(str.indexOf(“5”)!=-1){console.log(“字符串123456里包含了5”);

  • 【Unity3D 灵巧小知识点】 ☀️ | Unity中如何使用代码切换场景

    【Unity3D 灵巧小知识点】 ☀️ | Unity中如何使用代码切换场景Unity小科普老规矩,先介绍一下Unity的科普小知识:Unity是实时3D互动内容创作和运营平台。包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者,借助Unity将创意变成现实。Unity平台提供一整套完善的软件解决方案,可用于创作、运营和变现任何实时互动的2D和3D内容,支持平台包括手机、平板电脑、PC、游戏主机、增强现实和虚拟现实设备。也可以简单把Unity理解为一个游戏引擎,可以用来专业制作游戏!Unity小知识点学习Unity中如何使用代码切.

  • 自学数据挖掘十大算法之AdaBoost「建议收藏」

    自学数据挖掘十大算法之AdaBoost「建议收藏」Adaboost简介:Adaboost(adaptiveboosting)是一种迭代算法,其核心思想是针对同一个训练集训练不同的分类器(弱分类器),然后把这些弱分类器集合起来,构成一个更强的最终分类器(强分类器)。其算法本身是通过改变数据分布来实现的,它根据每次训练集之中每个样本的分类是否正确,以及上次的总体分类的准确率,来确定每个样本的权值。该算法其实是一个简单的弱分类算法提升过程

  • webservice最大长度_网址最大长度

    webservice最大长度_网址最大长度各浏览器HTTPGet请求URL最大长度并不相同,几类常用浏览器最大长度及超过最大长度后提交情况如下:IE6.0:url最大长度2083个字符,超过最大长度后无法提交。IE7.0:url最大长度2083个字符,超过最大长度后仍然能提交,但是只能传过去2083个字符。firefox3.0.3:url最大长度7764个字符,超过最大长度后无法提交。Opera9.52:url最大长度7648个字符,超过最

  • Android 在本地应用 启动抖音(进入主页)

    Android 在本地应用 启动抖音(进入主页)

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号