为什么会出现浮动元素呢?简单点,比如说,块级元素表示的列表,默认的,每行列表都独占一行显示,如果想让他们排在一行内,就可以使用浮动定位,将元素浮起来,一行排列。浮动的元素水平居中,有两种情况,一是浮动的元素有固定的宽度,另一种是无法确定宽度的浮动元素居中。
一、确定宽度的浮动元素
用列表表示的水平菜单栏,浮动在一行,整个菜单的宽度是固定的
<div class="header">
<ul>
<li>HTML/CSS</li>
<li>JavaScript</li>
<li>Server Side</li>
<li>ASP.NET</li>
<li>XML</li>
<li>Web Services</li>
</ul>
</div>
<style type="text/css">
html,body{margin: 0px;padding: 0px;}
ul {list-style: none;}
a {text-decoration: none;}
.header {background: #fbfbfb; width: 700px;margin: 20px auto;height: 50px;font-size: 14px;text-align: center;line-height: 50px;}
.header ul li {float: left;width: 100px;}
</style>
因为header的宽度是固定的,所以设置header的左右外边距为自动就可满足header整体居中显示,即:margin:20px auto;上下外边距可自动定义。
另:设定header元素的height,同时设定line-height等于height,可以使得header中的元素上下也居中。
二、无法确定宽度的浮动元素居中
一个非常简单的例子,就是用列表来表示页码,因为页码会根据的内容的多少有多有少,无法确定其整个元素的宽度
<div class="pagelist">
<div class="pages">
<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="#">4</a></li>
<li><a href="#">5</a></li>
<li>...</li>
<li><a href="#">99</a></li>
<li><a href="#">100</a></li>
<li><a href="#">>></a></li>
</ul>
</div>
</div>
<style type="text/css">
ul {list-style: none;}
a {text-decoration: none;}
.pagelist{position: relative;float: left;left: 50%;}
.pages {position: relative;float:left;right: 50%; margin: 20px auto;text-align: center;height: 30px;}
.pages ul {height: 30px;text-align: center;margin: auto;line-height: 30px;}
.pages li{float: left;height: 30px;margin-left: 4px;}
.pages ul li a{border: 1px solid #e3e3e3;border-radius: 3px;padding: 0px 10px;}
</style>
pages元素显示的是整个页码,并且都浮动在一行,因为pages元素没有固定的宽度,所以,怎么设置pages的左右外边距为自动都不会起效果,设置text-align:center;对其也没有效果,如果这样想的话确实是件很纠结的事。这个时候,需要在pages的外边再添加一个div————pagelist,并且设置 .pagelist {position:relative;float:left;left:50%;} .pages {position:relative;float:left;right:50%;}一样以来,一左一右,就会使得pages中的元素居中显示了
相关推荐
对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中,对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。解决水平居中问题有很多种方法,下面先给大家分享一下三种方法,希望能帮助...
一、宽度自适应的元素水平居中: 1.宽度自适应的元素可以是:绝对位定、浮动元素、行内元素。而我们通常布局,肯定不会用行内元素,所以会选择,绝对定位或浮动。 2.居中:这里我们应该会想到1/2、50%、一半等...
复制代码代码如下: ”demo”> <ul> <li><a>我居中了</a></li> <li><a>我居中了</a></li> <li><a>我居中了</a></li> <li><a>我居中了</a></li> <li><a>我居中了</a></li> </ul> </div> 当做的是水平导航条时,有以下...
5.7.5 使用text-align 属性的水平居中 5.7.6 使用margin 属性的水平居中 5.8 浮动属性 5.8.1 浮动属性详解 5.8.2 相邻的浮动元素和固定元素 5.8.3 相邻的两个浮动元素 5.8.4 相邻的多个浮动元素 5.9 关于ul 和li 的...
若为块元素(无浮动),则一般有两种方法可实现对其的水平居中,一为margin:0 auto;二为通过css计算函数calc; 垂直居中 若为行内元素,一般对其父元素用line-height:{height}即可,若为图片元素则需再对该元素使用...
css常见单位rpx、px、em、rem、%、vh、vw的区别,垂直居中水平居中,利用css构建三角形(正三角,倒三角,左/右三角),响应式布局的方式,几种,媒体查询原理,flex布局,父相子绝,css常见单位rpx、px、em、rem、%...
...语义化标签:段落标签,标签自定义文字样式,标题标签,块,标签定义头部,标签定义底部,标签定义正文区段,标签定义...定宽块状元素水平居中设置; 已知宽高实现盒子水平垂直居中; 不知宽高实现盒子水平垂直居中。
具体来说就是把要居中的元素的margin-left和margin-right都设为auto,此方法只能进行水平的居中,且对浮动元素或绝对定位元素无效。 2、使用 text-align:center 这个没什么好说的,只能对图片,按钮,文字等行内...
1.怎么让一个不定宽高的 DIV,垂直水平居中 3.浮动与清除浮动3.1 浮动相关知识float属性的取值:left:元素向左浮动 7. CSS 引入的方式有哪
可以让当前元素在父元素里水平居中。 Q:计算盒子在网页中真正所占的空间: 宽 width+padding-left/right+border-left/right+margin-left/right 高 height+padding-top/bottom+border-top/bottom+margin-top/...
包括以下内容: 代码规范 CSS基础 ...水平居中…浮动 列表元素 清除浮动clear 边框border 边界margin 高度自适应 CSS文本属性 文本的间隔与空白 各种水平和垂直居中1 字体的综合属性 图文混排 ......
横向导航 CSS样式嵌套 div+css处理firefox与IE6的水平居中效果 div+css的padding缩写方式 div+css的格式较验 div+css的重要工具:Internet Explorer Developer Toolbar div+css使用!important标记...
8. 元素水平居中问题 3 9. Div的垂直居中问题 3 10. margin加倍的问题 3 11. IE与宽度和高度的问题 3 12. 页面的最小宽度 3 13. DIV浮动IE文本产生3象素的bug 3 14. IE捉迷藏的问题 3 15. float的div闭合;...
浮动元素的特性五、清除浮动解决方法六、定位1. 边偏移2. 定位模式2.1、静态定位 static2.2、相对定位 relative2.3、绝对定位 absolute2.4、绝对定位垂直水平居中2.5、固定定位 fixed2.6、重叠七、常见布局1. 版心2....
relative,absolute,sticky,Static、box-sizing属性、CSS 盒子模型、BFC块级格式上下文原理场景、元素水平垂直居中、元素隐藏、页面布局:Flex 布局、Rem 布局、百分比布局、浮动和清除浮动。 适用人群:初级开发...
Baidu-Test4-27:完成task0001的练习题。总结:虽然是基础知识,可还是有很多细节的知识没有掌握。...总结:巩固了float浮动,position定位,水平居中、border-radius圆形头像知识,学到css3透明度颜色渐变新知识