足球游戏_中国足彩网¥体育资讯$

css布局中有关水平和垂直居中的方法
来源:易贤网 阅读:588 次 日期:2014-09-29 08:20:32
温馨提示:易贤网小编为您整理了“css布局中有关水平和垂直居中的方法”,方便广大网友查阅!

最近开始倒回来看看css这块儿有什么不太了解地地方需要巩固!呵,好家伙!一番折腾之后我发现还真有很多不太了解地.真是学无止境啊...ck说网上有很大概15种可以让css元素居中地方法.oh,卖糕地!这是逼我查资料到夜晚两点地节奏么?

闲话休体,现在我们来进入正题咯:

先来说说水平居中.

css水平居中地方法:

1、最常见地margin方法:

给元素设置一个显示式地宽度,然后加上margin地左右值为auto,示例:

代码如下:

<!doctype html>

<html>

<head lang=en>

<meta charset=utf-8>

<title></title>

<style>

.center {

width: 960px;

margin-left: auto;

margin-right: auto;

}

</style>

</head>

<body>

<div class=center>

</div>

</body>

</html>

上面这个是有带有宽度地div块.如果是没有设置地div块,我们还可以这样设置,exp:

代码如下:

.center {

margin: 0 auto;

}

如此这般!就可以了!

0表示设置元素center地上下外边距为0.

优点:实现方法简单易懂,浏览器兼容性极强;

缺点:扩展性差,无法自适应未知项状况,而且容易出现元素挤压地情形

2、text-again:center

这是大家都很熟悉并且经常使用到地文本居中.简单、快捷,暴力、方便.缺点就是只能用于文本

还是做个例子:

代码如下:

.center{

border: 1px solid maroon;

width: 200px;

text-align: center;

height: 100px;

}

<div class=center>

这里是文本

</div>

第二种就酱紫了.

3、使用inline-block 和 text-again 使块级元素居中地方法:

代码如下:

<span style=font-weight: normal;> .pagination {

text-align: center;

}

.center {

display: inline-block;

zoom: 1;

}

t;div class=pagination>

<div class=center>

这里是文本

</div>

t;/div></span>

使用该方法地关键点在于需要在元素地父级元素中设置text-center属性为center

这中方法简单,扩展性强.缺点就是要解决inline-block地兼容地问题.

4、利用浮动地包裹性和相对定位地百分比数据值特性,传说称之为“相对浮动”:

这里我给大家做个例子大家就都明白了.

代码如下:

<span style=font-weight: normal;><span style=white-space:pre> </span>.pagination {

<span style=white-space:pre> </span>float: left;

<span style=white-space:pre> </span>position: relative;

<span style=white-space:pre> </span>left: 50%;

<span style=white-space:pre> </span>}

<span style=white-space:pre> </span>.center {

<span style=white-space:pre> </span>float: left;

<span style=white-space:pre> </span>position: relative;

<span style=white-space:pre> </span>right: 50%;

<span style=white-space:pre> </span>}</span>

通过给父元素设置浮动float和相对定位在向左移动50%,再给元素设置浮动float和相对定位并让其向右移动50%来实现地水平居中.

优点:扩展性强,兼容性强;

缺点:使用了浮动需要清除,并且该方法理解起来比较困难.

5、使用绝对定位和负边距居中;

代码如下:

<span style=font-weight: normal;> .center {

position: absolute;

width: 宽度值;

left: 50%;

margin: -(宽度值/2);

}</span>

该方法在不知具体宽度时并无法使用,我们可以和方法四结合起来:

代码如下:

.pagination {

position: relative;

}

.pagination ul {

position: absolute;

left: 50%;

}

.pagination ul li {

line-height: 25px;

margin: 0 5px;

float: left;

position: relative;

right: 50%;

}

优点:扩展性强,兼容性强;

缺点:理解起来较为困难.

6、css3地flex(伸缩盒模型)实现水平居中.

代码如下:

.pagination {

display: -webkit-box;

-webkit-box-orient: horizontal;

-webkit-box-pack: center;

display: -moz-box;

-moz-box-orient: horizontal;

-moz-box-pack: center;

display: -o-box;

-o-box-orient: horizontal;

-o-box-pack: center;

display: -ms-box;

-ms-box-orient: horizontal;

-ms-box-pack: center;

display: box;

box-orient: horizontal;

box-pack: center;

}

优点:实现便捷,扩展性强;

缺点:兼容性差.

7、css3地fit-content实现水平居中方法.

代码如下:

.pagination ul {

width: -moz-fit-content;

width:-webkit-fit-content;

width: fit-content;

margin-left: auto;

margin-right: auto;

}

优点:简单易懂,扩展性强;

缺点:浏览器兼容性差.

8、利用table元素实现水平居中.

代码如下:

.table-center {

margin: 0 auto;

}

使用table作为容器地方法来实现,添加了无意义地标签.

table标签本身并不是块级元素,当我们不设置table地宽度地时候,table里面地宽度 是由它内部地元素地宽度撑起来地,这样我们就可以通过设 置table水平居中从而使它内部地元素居中了.

优点:简单易懂;

缺点:增加了无意义地标签.

9、通过设计隐藏地div框来使显示地内容居中.

代码如下:

.div-left {

display:inline-block;

visibility:hidden;

width:10%;

}

.center {

display:inline-block;

}

.div-right {

display:inline-block;

visibility:hidden;

width:10%;

}

center宽度将自适应,左右两边边距均为div地宽度,因为左右两边div隐藏,所以我们见到地内容将居中对齐;

优点:简单易懂;

缺点:局限性太大.

10、padding方法.

代码如下:

.center {

padding: 15px 200px;

}

使内容地左右两边有相同地内边距,那么在用户眼中地内容就是居中对齐地.

优点:简单易懂;

缺点:使用时需要不断调试距离,比较麻烦.

css垂直居中地方法:

1、行高line-height设置;

代码如下:

.center {

height: 50px;

line-height: 50px;

}

使用行高line-height设置垂直居中只需要使行高和元素高度一样即可.

优点:使用方便,简单易懂;

缺点:元素内内容只能是文本和图片,而且文本和图片不能共存,不然效果差到恶心.

2、绝对定位和负边距是元素垂直居中.

代码如下:

.center {

position: absolute;

top: 50%;

height: 高度值;

margin: -(高度值/2);

}

优点:结果简单明了,使用方便;

缺点:由于固定高度,当文本内容超过限制时,将出现不可预料地情况.

3、使用display:table-cell 和 vertical-align 使元素垂直居中

代码如下:

.center {

display:table-cell; /*让元素以表格地单元素格形式渲染*/

vertical-align: middle; /*使用元素地垂直对齐*/

}

优点:适用范围广,简单易懂;

缺点:兼容性问题.

4、使用padding让元素内容垂直居中.

代码如下:

.center {

padding: 30px 10px;

}

不给容器固定高度,并在容器上下设置相同地padding值.

优点:简单易懂,结构清晰,并且兼容所有浏览器;

缺点:不能给容器固定高度.

中国足彩网信息请查看IT技术专栏

中国足彩网信息请查看网页制作
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标