网页元素水平居中的几种解决方案 - 文章教程

网页元素水平居中的几种解决方案

发布于 2017-06-21 字数 4219 浏览 1840 评论 0

一般我们的网页元素都是居中的,这对于大屏幕的设备来说也是最合适的布局方式,而小屏幕的设备我们一般都是全屏展示、响应式布局,那么问题来了,我们改如何有效的设置元素水平居中,达到兼容所有显示屏幕设备。

网页Web开发

块元素外边距Auto自动居中

我们把元素的左右的外边距Margin设置为Auto的时候,元素就会自动居中,但是这个属性只针对于块元素,对内联元素没有什么效果,网页的常规布局也基本都是这么设置,而且兼容性非常好,几乎所有的浏览器都支持。

在实际使用中,我们可以为这些需要居中的元素创建一个起容器作用的Class类。需要特别注意的一点就是,必须为该容器指定宽度。

#container {
    margin-left: auto;
    margin-right: auto;
    width: 980px;
}

在大多数主流浏览器中,这种方法都非常有效,即使是Windows平台上的IE6,在其标准或者兼容模式(compliance mode)下,也能够正常显示。如果低于IE6的浏览器就无效了,但是现在谁还是用IE6一下的浏览器。

注意:如果我们的内容比显示屏幕宽,那么这个方法也就失效了。

尽管在支持上不尽如人意,但大多数设计师,都建议尽可能地使用这种方法。该方法也被认为,在各种用CSS实现元素水平居中方法中,最正确、最合理、最简单的一种方式。

内联元素Text-align文本居中

Text-align这个属性比较神奇,别看他的字面意思是文本居中,但是对几乎所有的内联元素都能生效,而且对块元素的display:inline、display:inline-block也同样能够生效,这个属性设置在父元素,对子元素的居中属性,它能兼容大多数浏览器,所以在某些情况下也自然必不可少。

<ul class="flink">
<li><a href="https://www.wenjiangs.com/donation">捐赠本站</a></li>
<li><a href="https://www.wenjiangs.com/friendship">友情链接</a></li>
<li><a href="https://www.wenjiangs.com/specification">使用规范</a></li>
<li><a href="https://www.wenjiangs.com/agreement">用户协议</a></li>
<li><a href="https://www.wenjiangs.com/website">前端开发导航</a></li>
<li><a href="https://www.wenjiangs.com/about">关于我</a></li>
</ul>
.flink{ text-align:center; margin:0; padding:15px 0;}
.flink li{ display:inline-block; padding:0 10px;}

其实上面的列表完全可以不用使用列表,直接使用一个DIV然后里面添加A标签,给DIV设置文本居中即可,代码量更加少,而且更合理,不过有些时候我们不得不使用UL列表,可以考虑上面的方式。

Margin负边距+Position绝对定位

上面两种居中的方法都有弊端,第一个当元素大于屏幕的宽度的时候,居中就会失效,而且还会出现滚动条,因为我们必须设置宽度,第二种由于是内联元素,当父级元素的宽度大于屏幕宽度时候,我们的子元素就会自动换行,这似乎也是可以理解的。

有一种方法,不管元素的宽度和屏幕的宽度如何变化,元素始终都在页面的正中央,但是可能小屏幕的时候,内容会被遮挡,做大屏幕兼容的时候可以试试这种方法。

负外边距解决方案,远不是仅仅为元素添加负外边距这么简单。这种方法需要同时使用绝对定位和负外边距两种技巧,而且代码量比较大,不过兼容比较好。

下面是该方案的具体实现方法。首先创建一个包含需要居中元素的容器,设置一个高度,因为使用到了绝对定位,没有高度将无法显示出来。

<div style="height:500px;">
</div>

然后在里面添加一个DIV容器,将其绝对定位于相对页面左边边缘50%的位置。这样该容器的左外边距将从页面50%宽度的位置开始算起。

最后再添加一个DIV内容容器,将这个容器的左外边距值设置为负的容器宽度的一半。这样即可将该容器固定在页面水平方向的中点,完整的代码如下。

<div style="height:500px;">
    <div class="wrap">
        <div class="wrap2">
            <a href="#" target="_blank">
                <img src="#" border="0" alt="全屏海报" />
            </a>
        </div>
    </div>
</div>
.wrap{ left:50%; top:auto;}
.wrap2{ left:-960px; top:auto;}
.wrap2 a{ width:1920px; height:500px; display:block;}

虽然这并不是首选的解决方案,但也是个不错的方法,且适用性极广,能够在几乎所有的浏览器上面兼容效果,并且目前淘宝和京东的大屏幻灯片展示布局也是采用的这个方法,还能兼容内容比屏幕宽的情况。

所以若想得到最广泛的浏览器支持,那么这种方法将会是最好的选择。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论