css点滴2—六种方式实现元素水平居中-阿里云开发者社区

开发者社区> ndblog> 正文

css点滴2—六种方式实现元素水平居中

简介: 本文参考文章《六种方式实现元素水平居中》 元素水平居中的方法,最常见的莫过于给元素一个显式的宽度,然后加上margin的左右值为auto。这种方式给固定宽度的元素设置居中是最方便不过的。但是很多情况下,无法确定容器宽度,这里我们讨论一下这些问题。
+关注继续查看

本文参考文章《六种方式实现元素水平居中》

元素水平居中的方法,最常见的莫过于给元素一个显式的宽度,然后加上margin的左右值为auto。这种方式给固定宽度的元素设置居中是最方便不过的。但是很多情况下,无法确定容器宽度,这里我们讨论一下这些问题。

为了更好说明问题,我们看一个制作分页效果的代码:

html代码:

<div class="pagination">
    <ul>
        <li>
            <a href="#">Prev</a></li>
        <li>
            <a href="#">1</a></li>
        <li>
            <a href="#">2</a></li>
        <li>
            <a href="#">3</a></li>
        <li>
            <a href="#">4</a></li>
        <li>
            <a href="#">5</a></li>
        <li>
            <a href="#">Next</a></li>
    </ul>
</div>

css代码:

        .pagination a {
            display: block;
            color: #f2f2f2;
            text-shadow: 1px 0 0 #101011;
            padding: 0 10px;
            border-radius: 2px;
            box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
            background: linear-gradient(to top,#434345,#2f3032);
            text-decoration: none;
        }
        .pagination a:hover {
            text-decoration: none;
            box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
            background: linear-gradient(to top,#f48b03,#c87100);
        }
        li {
            list-style: none;
        }

效果:

这显然不是我们想要的效果,接下来我们分几种方案来实现水平居中。下面css代码我们只贴出关键代码。

1.margin和width实现水平居中

第一种方式是最古老的实现方案,也是最常见的,在分页容器上定义一个宽度,然后配合margin的左右值为“auto”实现效果。

css代码:

        .pagination li {
            line-height: 25px;
            list-style: none;
            display: inline;
            float: left;
            margin: 0 5px;
        }
        /*!*给容器一个宽度*!*/
        .pagination {
            width: 500px;
            margin-left: auto; /**/
            margin-right: auto;
        }

效果:

 

 

 效果是实现了,但是扩展性不一定强。这种方式显示了5个分页和首页,末页共7个显示项,往往我们无法知道到底要显示多少个分页项,无法确定每个分页项的宽度是多少,也就无法确定容器的宽度。

缺点:这种方法简单易懂,浏览器兼容性强,但是扩展性差,无法自适应未知情况。

2.inline-block实现水平居中

这种方式使用inline-block和text-align:center结合起来实现水平居中。

css代码:

.pagination{
            text-align: center;
            font-size: 0;
            letter-spacing: -4px;
            word-spacing: -4px;
        }
        .pagination li {
            line-height: 25px;
            margin: 0 5px;
            display: inline-block;
            *display: inline;
            zoom: 1;
            letter-spacing: normal;
            word-spacing: normal;
            font-size: 12px;
        }

效果:

 

 

 这种方法相对来说简单,但是使用inline-block实现了水平居中的问题,却又产生了一个新的问题,就是分页项之间的回车符带来的空白间距,这个间距也不是所有浏览器都会有,所以要解决下inline-block带来的间距,详细解决方法参考《如何解决inline-block元素的空白间距》

缺点:这种方法简单易懂,扩展性强,但是需要额外处理inline-block的空白间距。

3.浮动实现水平居中

float浮动要么考左,要么靠右,没有居中选项,其实只要略加处理就可以了。

css代码:

        .pagination {
            float: left; /*分页容器浮动到左边*/
            width: 100%; /*分页容器宽度为100%*/
            overflow: hidden;
            position: relative; /*相对正常位置定位*/
        }
        .pagination ul {
            clear: left;
            float: left; /*内部容器浮动到左边*/
            position: relative; /*相对正常位置定位*/
            left: 50%; /* 整个内部容器向右边移动宽度的50% */
            text-align: center;
        }
        .pagination li {
            line-height: 25px;
            margin: 0 5px;
            display: block;
            float: left; /*每个分页也浮动到左边*/
            position: relative; /*相对正常位置定位*/
            right: 50%; /* 每个分页项向左移动宽度的50% */
        }

效果:

这种方法和前面的都不同,使用浮动float配合position:relative相对自身定位来实现,下面的文章介绍了这种方法的实现原理《Horizontally Centered Menus with no CSS hacks》

div是一个块元素,其默认宽度是100%,如图所示:

如果给div设置了浮动之后,他的内容有多宽就会撑开多大的容器(除显式设置元素宽度值之外),这也是让分页导航居中的关键:

接下来使用传动的制作方法,让导航浮动到左边,而且每个分页也进行浮动

现在要想的办法是让分页导航居中的效果,这里是通过“position:relative”属性实现,首先在列表项ul上向右移动50%(left:50%),如下图:

如上图一样整个分页向右移动了50%的距离,接着我们在“li”上也定义“position:relative”属性,但其移动方向和列表“ul”移动方向刚好相反,而且移动值保持一致:

这样就实现了float浮动居中的效果。

缺点:这种方式实现的兼容性强,扩展性强,但是实现原理比较复杂。

4.绝对定位实现水平居中

绝对定位实现水平居中,元素绝对定位:“position:absolute;”,向右移动50%:“left:50%;” ,设置固定宽度:“width:宽度值;”,设置左外边距为宽度值的一半:“margin-left:-(宽度值/2);”,代码如下:

.ele {
    position: absolute;
    width: 宽度值;
    left: 50%;
    margin-left: -(宽度值/2);
}

但是这种做法有一个缺点,大多数情况下我们不知道元素的宽度,或者元素宽度是不固定的,但是我们可以在第三种方法的基础上做一点变通:
css代码:

        .pagination {
            position: relative; /*div相对定位*/
        }
        .pagination ul {
            position: absolute; /*分页容器绝对定位*/
            left: 50%; /*分页容器向右移动50%*/
        }
        .pagination li {
            line-height: 25px;
            margin: 0 5px;
            position: relative; /*分页元素相对定位,注意这里不是absolute*/
            float: left; /*分页元素浮动在右边*/
            right: 50%; /*分页元素向左移动50%*/
        }

效果:

 

 缺点:这种方式扩展性强,兼容性强,但是理解起来比较难。

5.css3的flex实现水平居中

css3的flex是一个很强大的功能,能让布局变得灵活方便,唯一的缺点就是目前兼容性差。

css代码:

        .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;

        }
        .pagination li {
            line-height: 25px;
            margin: 0 5px;
            float: left;
        }

效果:

 

 缺点:这种方法实现起来比较便捷,扩展性强,但是兼容性比较差。

6.css3的fit-content实现水平居中

这种实现居中的方法参考《Horizontal centering using CSS fit-content value》。“fit-content”是给css的“width”属性增加一个属性值,也配合margin可以轻松的实现水平居中的效果。

        .pagination ul {
            width: -moz-fit-content;
            width: -webkit-fit-content;
            width: fit-content; /*给with属性值设置为fit-content*/
            margin: 0 auto;
        }
        .pagination li {
            line-height: 25px;
            margin: 0 5px;
            float: left;
        }

效果:

 

 缺点:这种方式简单易懂,扩展性强,缺点是兼容性差。

 

作者:Tyler Ning
出处:http://www.cnblogs.com/tylerdonet/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,可以通过以下邮箱地址williamningdong@gmail.com  联系我,非常感谢。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10089 0
Kubenetes里pod和service绑定的实现方式
我之前的文章 如何在Kubernetes里创建一个Nginx service介绍了如何创建一个Kubernetes pod和service,使用的方法是命令kubectl run。 本文介绍另一种方式,通过这种方式来学习Kubernetes里pod和对应的service是如何绑定的。
2275 0
C#通过“委托和事件”的方式实现进程监控并与“普通方式”对比
今天重新学习了一下观察者模式,对我的思路产生了启发。进程监控程序之前写过几个,这回换一种思路,改用委托和事件来实现。我已经用序号将关键的几步标注,方便大家理顺思路。代码如下: using System; using System.
685 0
【div+css】两个div,如何让内层的div在外层div中水平垂直居中
好久没有写样式,很是很生疏   ==================================================================== 方法1: .parent { width:800px; height:50...
1152 0
并发服务器三种实现方式之进程、线程和select
这篇主要介绍如何实现并发服务器,主要通过三种方式:进程、线程和select函数来分别实现。
1419 0
css点滴3—5种方式实现圆环
使用css实现圆环,最简单的方式就是使用嵌套标签,设置border-radius就可以实现,但是这个是最简单的方式,这篇文章我们介绍5种方式实现圆环。 1.两个标签嵌套 html代码: 1 css代码: .
868 0
css点滴2—六种方式实现元素水平居中
本文参考文章《六种方式实现元素水平居中》 元素水平居中的方法,最常见的莫过于给元素一个显式的宽度,然后加上margin的左右值为auto。这种方式给固定宽度的元素设置居中是最方便不过的。但是很多情况下,无法确定容器宽度,这里我们讨论一下这些问题。
1130 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13892 0
MFC渐入渐出框实现方式二
类似360消息弹出框,实现方式一见http://blog.csdn.net/segen_jaa/article/details/7848598。 本文采用另外的API实现渐入渐出效果。 主要API:SetLayeredWindowAttributes。
687 0
+关注
ndblog
不冒任何险,什么都不做,什么也不会有,什么也不是。
327
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载