css浮动居中实现2

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        *{            padding: 0;            margin: 0;        }

        .clearfix:after { content:""; height:0; visibility:hidden; display:block; clear:both; }        .clearfix { zoom:1; }        .wrap{            margin: 20px auto;            padding: 10px;            background: #FF2F2F;            overflow: hidden;        }        .content{            float: left;            position: relative;            left:50%;        }        ul{            position: relative;            left:-50%;            float: left;        }        ul li{            list-style: none;            float: left;            margin: 2px 5px;        }        ul li a{            display: block;            padding: 2px 5px;            background: #FFFFFF;        }    </style></head><body>    <div class="clearFix wrap">        <div class="content">            <ul>                <li><a href="#">上一页</a></li>                <li><a href="#">1</a></li>                <li><a href="#">2</a></li>                <li><a href="#">3</a></li>                <li><a href="#">3</a></li>                <li><a href="#">4</a></li>                <li><a href="#">5</a></li>                <li><a href="#">6</a></li>                <li><a href="#">7</a></li>                <li><a href="#">8</a></li>                <li><a href="#">9</a></li>                <li><a href="#">10</a></li>                <li><a href="#">下一页</a></li>            </ul>        </div>    </div></body></html>
时间: 2024-10-15 20:14:30

css浮动居中实现2的相关文章

DIV CSS固定宽度居中实例

DIV CSS固定宽度居中布局实例 在布局一个网页时,非常重要的是一般网页主体布局都是水平居中的,其实就是对最外的DIV层设置居中布局,这时布局居中就是我们这里要介绍关键点. DIV布局水平居中,关键使用CSS单词为margin:0 auto.解释:DIV对象外边距左右为自动适应距离(根据对象设置宽度样式自动判断浏览器除去设置宽度后剩下宽度左右自动对等自然就实现布局居中),上下间距为0px. 关键实例CSS代码: body{ text-align:center} .box{ margin:0 a

css元素居中实现方法

关于css元素居中,查阅资料和实验有以下几种方法: 水平居中 1.最简单的在父元素中加入 text-align:center .这条语句不用关心子元素是否有固定的尺寸大小. 但只能对图片,按钮,文字等行内元素(display为inline或inline-block等)进行水平居中. 但要说明的是在IE6.7这两个奇葩的浏览器中,它是能对任何元素进行水平居中的. 2.子元素宽度确定,可以使用 margin:0 auto 或者 margin-left:auto ; margin-right:auto

css盒子居中

方法1(margin: 0 auto)<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css浮动盒子居中</title> <style> *{ margin: 0; padding: 0; list-style: none; } body{ background: #fffccc; text-

CSS浮动的3个特性(高手绕行)

1.  浮动元素会脱离正常的文档流,按照其外边距指定的位置相对于它的上一个块级元素(或父元素)显示: 代码示例: 1 <!DOCTYPE HTML > 2 <html> 3 <head> 4 <meta charset='utf-8'/> 5 <title>浮动元素的性质</title> 6 <style type="text/css"> 7 *{ 8 margin:0; 9 padding:0; 10

css浮动(folat),清除浮动(clear)

css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右浮动 html文档流:自窗体自上而下分成一行一行,并在没行中从左到右的顺序排放元素. 通过例子来解释浮动 1.页面上有两个块元素,每个块元素独占一行 2.我们希望他们能并排显示,这是就可以使用float,我们先给红色的div加float:left,发现两个是在一行了,但是他们重叠在了一起. 3.这是

CSS元素居中

html中元素分为行内元素和块级元素.采用margin或者float来使元素居中,是比较常见的方法. margin:0 auto只能用于块级元素,不能使行内元素居中. 参考知乎上为什么「margin:auto」可以让块级元素水平居中?,margin:0 auto,是左右外边距自适应,水平方向的 auto,其计算值取决于可用空间(剩余空间).元素本身为块级元素,那么水平方向可用空间的距离为其包含盒的宽度(宽度=盒总宽度-(padding-left+padding-right+border-left

利用CSS实现居中对齐

1. 文本居中 首先编写一个简单的html代码,设置一个类名为parentDiv的div对象.html代码如下: 1 <div class="parentDiv"> 2 这里随意填写~... 3 </div> 1.1 实现文字水平居中(使用text-align) 对div.parentDiv设置text-align: center;来实现.CSS代码如下: 1 [css] 2 3 .parentDiv { 4 width:200px; 5 height:100p

css浮动和清除浮动

浮动存在的原因 在word排版中,文本可以环绕图片.在css中,想要实现文字环绕的效果,只能借助于float,没有其他的替代方式.在实际中,文档的布局经常会使用浮动. float属性 float属性,默认为none,也就是标准流通常的情况.如果将float的属性的值设置为left或right,元素就会向其父元素的左侧或右侧紧靠. inherit表示从父元素继承float属性的值. clear属性 clear 属性定义了元素的哪边上不允许出现浮动元素.在 CSS1 和 CSS2 中,这是通过自动为

验分享:CSS浮动(float,clear)通俗讲解

经验分享:CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解. 如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你. 小菜水平有限,本文仅仅是入门教程,不当之处请谅解! 本文以div元素布局为例. 教程开始: 首先要知道,div是块级元素