浮动元素横排居中显示及浏览器兼容性处理

经常会遇到这样的页面布局:在一排显示几个不同的区域内容,但它们相对于页面是居中对齐的。注意这些区域内容不只是文字,也许还有图片或者其它元素混合而成。一般这样的布局我们很容易想到要用浮动float,但是怎么样居中对齐而又兼容低端浏览器哪?请接着往下看。

首先看html代码:

<div class="webFooter">
    <div class="wrap">
        <div class="tabs">
            <ul>
                <li>
                    <a href="javascript:void(0)">高大上平台</a><em>|</em>
                </li>
                <li>
                    <a href="javascript:void(0)">关于我们</a><em>|</em>
                </li>
                <li>
                    <a href="javascript:void(0)">联系我们</a><em>|</em>
                </li>
                <li>
                    <a href="javascript:void(0)">服务条款</a><em>|</em>
                </li>
                <li>
                    <a href="javascript:void(0)">人才招聘</a><em>|</em>
                </li>
                <li>
                    <a href="javascript:void(0)">帮助中心</a><em>|</em>
                </li>
                <li>
                    <a href="javascript:void(0)">帮助中心</a><em>|</em>
                </li>
                <li>
                    <a href="javascript:void(0)">帮助中心</a><em>|</em>
                </li>
                <li>
                    <a href="javascript:void(0)">帮助中心</a><em>|</em>
                </li>
                <li>
                    <a href="javascript:void(0)">客服中心</a>
                </li>
            </ul>
        </div>
    </div>
</div>

有人会说这些item都是文本,其实把ul换成其它元素(比如div)也是可行的。原理就是.wrap相对于页面居中,宽度是1200px,当然也可以是1000px,宽度自由定义,只要大于内容宽度即可。然后.tabs左浮动并且设置position: relative; left: 50%; 然后为其内部元素ul设置float: left; position: relative; left: -50%; 最后要给.wrap加上overflow: hidden; *position: relative;

css代码如下:

<style type="text/css">
body, ul, li, ol, dl, dt, dd {padding: 0; margin: 0; list-style: none;}
.webFooter {height: 100px; font-size: 12px; background: #278ed1; font-family: Microsoft YaHei; color: #fff;}
.webFooter a,
.webFooter a:hover {color: #fff;}
.webFooter .wrap {width: 1200px; margin-left: auto; margin-right: auto; background: red; overflow: hidden; *position: relative;}
.webFooter .tabs {float: left; position: relative; left: 50%; margin-top: 25px;}
.webFooter .tabs ul {float: left; position: relative; left: -50%;}
.webFooter .tabs li {float: left; line-height: 17px;}
.webFooter .tabs a {float: left; font-size: 14px;}
.webFooter .tabs em {float: left; width: 20px; height: 15px; *line-height: 15px; text-align: center;}
</style>

解释一下为什么要给.wrap加上overflow: hidden; *position: relative;哪?原因就是内容比较长的话,由于.tabs的left: 50%; 导致其位置超出了.wrap的宽度范围,当显示屏稍小的时候页面会出现横向滚动条,并且ie7比较顽固,要加*position: relative;才行。有兴趣的端友可以去掉overflow: hidden; *position: relative;试一下,或者改变内容的多少再来试一下,相信会有不同的感觉!

最后,把ul改成<div class="inner">(为.inner写css:float: left; position: relative; left: -50%;)便可以在.inner里面写你想要的浮动排版了(比如:来一个二维码的图片,再来一个客服电话及图标,然后再来一个微博的链接...等等)。

时间: 2024-11-05 18:59:12

浮动元素横排居中显示及浏览器兼容性处理的相关文章

html实战代码:浮动元素横排居中显示的实现

在进行web前端开发项目http://www.maiziedu.com/course/web/的时候,经常会遇到这样的页面布局:在一排显示几个不同的区域内容,但它们相对于页面是居中对齐的.注意这些区域内容不只是文字,也许还有图片或者其它元素混合而成.一般这样的布局我们很容易想到要用浮动float,但是怎么样居中对齐而又兼容低端浏览器哪?请接着往下看.首先看html代码:<div class="webFooter">  <div class="wrap&quo

元素自动居中显示

我们在写页面时经常会遇到让一个元素自动居中显示的需求,这个元素有可能是块级元素,有可能是行内元素,也可能是文字等等,而居中的需求有可能是水平居中,垂直居中或者两者同时居中. 据我目前了解,居中有四种方式:1. 利用table表格特性: 2. 使用table-cell属性以table方式渲染: 3. margin自动居中: 4. 使用absolute配合margin负值居中:以下逐个讲解: 1. 利用table表格特性 这 种方式可以让内容垂直居中(valign="middle")和水平

浮动元素的居中

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>页面浮动元素的水平居中</title> <style type="text/css"> .clearfix:after { content:"

手机网站自适应无高度情况下浮动元素背景如何显示

给标签加一个overflow:hidden就可以 overflow:hidden是超出隐藏..只要不设高度而且里面有浮动元素的话高度就会等于浮动元素的高度. 潘智勇 9/25/2014 5:16:55 PM 如果设了高度而且小于子元素高度的就会把子元素多出来的隐藏掉

如何居中浮动元素

方法一:给浮动添加一个父级元素 <style type="text/css"> .con { position: relative; float: left; left: 50%; background: rgb(5, 175, 231); } .box { position: relative; float: left; left: -50%; width: 100px; height: 100px; background: lightcoral; } </styl

css专题学习-浏览器兼容性问题目录

此帖是我所分享的浏览器兼容性问题相关的所有目录. [分享]浏览器兼容性问题综述 -- 正确的认识浏览器兼容性问题 [分享]你的元素居中对齐了吗? --- 关于 'text-align:center' 的问题 [分享]<a>标签的伪类书写顺序问题 [分享]IE6 中 A 标签 hover 伪类特殊性过高的问题 [分享]深入挖掘document.getElementsByTagName()方法的返回值 [分享]警惕你的 Date 对象 [分享]重新认识IE盒模型bug [分享]你知道吗?--- 表

css如何让浮动元素水平居中

对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中,对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题.解决水平居中问题有很多种方法,下面先给大家分享一下三种方法,希望能帮助到大家. 方法一: 1.HTML 部分: <div class="box"> <p>我是浮动的</p> <p>我也是居中的</p></div> 2.CSS 部分: .box{ float:left;

CSS如何让浮动导航栏元素居中显示

CSS如何让浮动导航栏元素居中显示:制作导航栏是最为基础的布局技能之一,当然对于稍有经验的人员来说没有任何问题,不过对于初学者可能会有一定的困扰.普通的导航栏一般具有一下几个特点,整个导航栏居中,导航栏目具有,并且能够均匀分布,下面就是一个这样的简单代码实例.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author"

绝对定位元素,浮动元素居中

绝对定位元素的居中实现  (转自:http://www.cnblogs.com/zyy711865/p/3479064.html) 方法一:兼容性不错的主流用法是: .element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 宽度的一半 */ } 但,这种方法有一个很明显的不足,就是需