0
点赞
收藏
分享

微信扫一扫

前端html小技巧—html水平垂直居中

Gaaidou 2022-01-12 阅读 211

今天分享下”前端html小技巧—html水平垂直居中“这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 最近,我遇到了很多居中的问题,所以我花了一些时间总结一下,把它放在这里。将来找到它也很方便

1.居中文本

复制代码代码如下:

<div class="wrap">

我在中间……

</div>

.. height+line-height+text-center(只能居中单行)

.wrap{

width:px;

height:px;

border:px solid red;

text-align: center;

line-height: px;

}

ps:text-align:center只是将元素下面的内联元素居中显示

1.2display:table-cell(多行固定高度居中)

复制代码代码如下:

.wrap{

width:px;

height:px;

border:px solid red;

text-align: center;

display:table-cell;

vertical-align: middle;

}

display:table-cell:ie67不管用,最好配合display:table;一起用

ie67下:(以后也不用了,不过也放这儿吧)

方法一:(通过em标签高度与父级等高,所以span和em居中就相当于span在父级居中)

复制代码代码如下:

<div class="wrap">

<span>

我在中间…… 我在中间…… 我在中间…… 我在中间……

</span>

<em></em>

</div>

.wrap{

width:px;

height:px;

border:px solid red;

text-align: center;

}

.wrap span{

vertical-align: middle;

display:inline-block;

width:http://www.qlyl1688.com:px;

}

.wrap em{

height:%;

vertical-align: middle;

display:inline-block;

}

方法二:(通过给子元素增加一个绝对定位的父级标签,再配合子元素的相对定位水平垂直居中)

复制代码代码如下:

<div class="wrap">

<span class="span">

<span class="span">我在中间…… 我在中间…… 我在中间…… 我在中间……</span>

</span>

</div>

.wrap{

width:px;

height:px;

border:px solid red;

display:table;

position:relative;

overflow: hidden;

}

.wrap .span{

display:table-cell;

vertical-align: middle;

text-align: center;

*position:absolute;

top:%;

left:%;

}

.wrap .span{

*position:relative;

top:-%;

left:-%;

}

1.3padding(内填充,不用多说)



复制代码代码如下:

.wrap{

width:px;

border:px solid red;

padding:px ;

}

2.居中元素

复制代码代码如下:

<div class="wrap">

<span></span>

</div>

2.1position:absolute+margin负值(必须要有宽高,才能计算margin)

复制代码代码如下:

.wrap{

width:px;

height:px;

position:absolute;

top:%;

left:%;

margin-top:-px;

margin-left:-px;

border:px solid red;

}

.wrap span{

width:px;

height:px;

background:red;

position: absolute;

top:%;

left:%;

margin-top:-px;

margin-left:-px;

}

ps:CSS实现DIV水平居中和上下垂直居中

复制代码代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>上下垂直居中 在线演示 DIVCSS5</title>

<style>

#main {

position: absolute;

width:400px;

height:200px;

left:50%;

top:50%;

margin-left:-200px;

margin-top:-100px;

border:1px solid #00F

}

/*css注释:为了方便截图,对CSS代码进行换行*/

</style>

</head>

<body>

<div id="main">DIV水平居中和上下垂直居中<a href="http://www.divcss5.com/">DIVCSS5</a></div>

</body>

</html>

介绍水平垂直居中原理

这里使用绝对定位position:absolute,使用left和top设置对象的距离和左是50%但如果设置50,%事实上,盒子没有达到中间效果,所以设置margin-left:-200px;margin-top:-100px;这里有一个技巧,margin-left值是宽度的一半,margin-top值也是对象高度的一半,同时设置为负,从而实现水平和垂直居中。以上是云南仟龙Mark给大家介绍的所有内容,希望对大家有所帮助,如果大家有任何疑问请在脚本之家留言,如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

举报

相关推荐

0 条评论