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)
blank

相关推荐

  • flowable camunda activiti 功能对比

    flowable camunda activiti 功能对比flowablecamundaactiviti三个框架都是从jbpm框架诞生出来的,先是有jbpm4,然后出来了一个activiti5,activiti5发展一段时间,又出来了一个Camunda。activiti5发展了4年,紧接着出来了一个flowable。本文重点对flowablecamunda两个框架的功能对比。对比的camunda版本是7.10.0,flowable框架的版本…

  • vue返回上一层不刷新页面_vue嵌套html

    vue返回上一层不刷新页面_vue嵌套html解决嵌套路由刷新时,路由没有变化,正常情况下页面是不会重新渲染的1、在router-view中加上条件渲染v-if默认为true。让它显示出来2、写写一个reload方法,在页面刷新只有,点击某个查询条件的时候调用这个重载的方法这是条件渲染变化了为false在修改数据之后使用$nextTick,条件渲染变化了为true则可以在回调中获取更新后的DOM如果需要带有查询参数…

  • st7789 旋转_ESP32驱动ST7789液晶屏

    让你的ESP32点亮一块ST7789液晶屏吧hello-world这块液晶屏尺寸是1.14寸,分辨率为135×240,驱动是ST7789。(不小心多买了一个并口版本,因为串口方式连接就能满足我的需求,所以并口屏幕吃灰预定了)序简单下介绍点亮这块屏幕的方法,介绍下如何配置参数并正确的显示内容。下载驱动库我使用的驱动库为TFT_eSPI接线如下:ESP32引脚名称液晶屏引脚名称3V3VCCGNDGND…

  • php双分支语句三个数排序「建议收藏」

    php双分支语句三个数排序「建议收藏」<?php$a = rand(100,999);$b = rand(100,999);$c = rand(100,999);echo “a=”.”$a”.”<br>”;echo “b=”.”$b”.”<br>”;echo “c=”.”$c”.”<br>”;if(($a > $b ) && ($a > …

  • 使SplitContainer中某个Panel宽度、高度不变[通俗易懂]

    使SplitContainer中某个Panel宽度、高度不变[通俗易懂]1.在窗体load时加入:splitContainer_AllLayout.SplitterDistance=120;上边代码字面意思是将水平、或垂直分开的SplitContainer的分区长度设置为1202.只要设置FixedPanel属性为希望宽度不变的panel即可:3.再设置控件不可拖动:splitContainer_AllLayout.IsSplitter…

  • Jenkins(2)docker容器中安装python3

    Jenkins(2)docker容器中安装python3前言使用docker安装jenkins环境,jenkins构建的workspace目录默认是在容器里面构建的,如果我们想执行python3的代码,需进容器内部安装python3的环境。进jenki

发表回复

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

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