当前位置&&&&&&&&&CSS常见的让元素水平居中显示方法
更多文章查询：&
CSS常见的让元素水平居中显示方法
&&&&&&&日09：29&&来源：&&作者:禅意花园笔记 &&
【文章摘要】用CSS让元素居中显示并不是件很简单的事情―同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋。让我们先来看一下CSS中常见的几种让元素水平居中显示的方法。
　　用CSS让元素居中显示并不是件很简单的事情―同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋。让我们先来看一下CSS中常见的几种让元素水平居中显示的方法。　　1.使用自动外边距实现居中　　CSS中首选的让元素水平居中的方法就是使用margin属性―将元素的margin-left和margin-right属性设置为auto即可。在实际使用中，我们可以为这些需要居中的元素创建一个起容器作用的div。需要特别注意的一点就是，必须为该容器指定宽度：　　div#container {　　margin-left:　　margin-right:　　width: 168　　}　　在大多数主流浏览器中，这种方法都非常有效，即使是Windows平台上的IE6，在其标准兼容模式（compliance mode）下也能够正常显示。但不幸的是，在更低版本的IE中，这种设置却并不能实现居中效果。所以若想在实际项目中使用这种方法，那么就要确保用户的IE浏览器版本不低于6.0。　　尽管在支持上不尽如人意，但大多数设计师都建议尽可能地使用这种方法。该方法也被认为是在各种用CSS实现元素水平居中方法中最正确、最合理的一种。　　2.使用text-align实现居中　　另一种实现元素居中的方法是使用text-align属性，将该属性值设置为center并应用到body元素上即可。这种做法是彻头彻尾的hack，但它却能兼容大多数浏览器，所以在某些情况下也自然必不可少。　　之所以说它是hack，是因为这种方法并没有将文本属性应用到文本上，而是应用到了作为容器的元素上。这也给我们带来了额外的工作。在创建好布局必须的div之后，我们要按照如下代码为body应用text-align属性：　　body{　　text-align:　　}　　之后会出现什么问题吗？body的所有子孙元素都会被居中显示。　　因此，我们就需要用再写一条规则，让其中的文本回到默认的居左对齐：　　p {　　text-align:　　}　　可以想象这条附加的规则将带来一些不便。另外，真正完全遵循标准的浏览器并不会改变容器的位置，而只会让其中的文字居中显示。　　3.组合使用自动外边距和文本对齐　　因为文本对齐居中方式有着良好的向下兼容性，且自动外边距方式也被大多数当代浏览器支持，所以很多设计师将二者组合起来使用，以期让居中效果得到最大限度的跨浏览器支持：　　body {　　text-align:　　}　　#container {　　margin-left:　　margin-right:　　border: 1　　width: 168　　text-align: left　　}　　可是这始终是个hack，无论如何也算不上完美。我们还是需要为居中容器中的文本编写附加的规则，但至少在各个浏览器中看起来都不错。　　4.负外边距解决方案　　负外边距解决方案远不是仅仅为元素添加负外边距这么简单。这种方法需要同时使用绝对定位和负外边距两种技巧。　　下面是该方案的具体实现方法。首先，创建一个包含居中元素的容器，然后将其绝对定位于相对页面左边边缘50%的位置。这样，该容器的左外边距将从页面50%宽度的位置开始算起。　　然后，将容器的左外边距值设置为负的容器宽度的一半。这样即可将该容器固定在页面水平方向的中点。　　#container {　　background: #ffc url(mid.jpg) repeat-　　position:　　left: 50%;　　width: 760　　margin-left: -380　　}　　看，没有任何hack！虽然这并不是首选的解决方案，但也是个不错的方法，且适用性极广―甚至在Netscape Navigator 4.x中都没有任何问题，很令人吃惊，不是吗？所以若想得到最广泛的浏览器支持，那么这种方法将会是最好的选择。　　
责任编辑：郑伟
&关于&CSS 元素水平居中&相关报道
&硅谷动力最新热点
loading...
频道热文排行
经典软件下载
往期精彩文章
网站合作、内容监督、商务咨询、投诉建议：010-
Copyright © 2000--
硅谷动力公司版权所有 京ICP证000088号用CSS如何实现单行图片与文字垂直居中_百度知道
用CSS如何实现单行图片与文字垂直居中
提问者采纳
.。以下为引用的内容;这个问题是在做页面中经常会遇到的问题.对于有行高或有行高＋高度的.。3．对2补充一下，首行我们先看一下最基础的的吧:就可以了;style&; &#47..:middle。所以也只能对IE6以下版本使用KACK了.:middle，我们只要简单的对内联元素应用vertical-align，FF可以正确显示;： 内联元素说明.，用上下补白的方法。（为了增加明显的效果对图片适当增加了高度）总结：．style img{vertical-align.当没有高度行高时，IE6以下则不完全支持！现在IE7已经改正了这个错误;以上是在没有设置高度／行高的事情下，不用这个样式也是可以的。此外对于一个图片和文字的高度相差无几的.style:&lt...，可以用不定高度：对于单行图片文字垂直居中（有图片的情况下）1：vertical-align.：否适用于.}如果STYLE中有其它如INPUT或其它内联元素可写成以下为引用的内容,;：．style{vertical-align.}或．style *{vertical-align，对于块元素中的内容也一样;&gt。警告.&lt..input{vertical-align.}HTML：．style img.。2，如果加入了高度和行高的事情下FF可以支持;&gt.}&#47：从上面的代码可以看出错误就是把样式应用在块元素中了我们只需要改样式为以下为引用的内容;*在不影响其它元素的情况下使用这个通配符*/div&gt：vertical-align不能影响表格单元中的内容的对齐.;地址&quot.，看以下测试结果;div class=&:middle:middle：vertical-align初始值！以下选自（CSS权威指南）以下为引用的内容.;&lt.:baseline使元素的基线同父元素的基线对齐，这样就可以兼容IE6了;分析;img src=&quot，ie6失效.： baseline（缺省值）可否继承
采纳率100%
其他类似问题
等待您来回答
为您推荐：
下载知道APP
随时随地咨询
出门在外也不愁欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> &div align=&center&&此内的属性align=&center&的作用是什么，使用是否同样能实现这样效果，如果用CSS替换div align center又如何实现。
&div align=&center&&作用是让此对象内的显示，可以使用、，均为横向水平居中内容无论是图片还是文字都能实现居中。
一、div使用align实现内容居中
1、完整如下：
&!DOCTYPE&html&&xmlns=&http://www.w3.org/1999/xhtml&&&&charset=&utf-8&&&align&center小例&&&&src=&/404-logo.gif&&width=&161&&height=&30&&&&&align=&center&&src=&/404-logo.gif&&width=&161&&height=&30&&&&&&&
2、其中&div align=&center&&作用是什么，有什么意思？
如代码片段：
&align=&center&&src=&/404-logo.gif&&width=&161&&height=&30&&
以上代码是什么意思,有什么作用?
其实作用是让此内图片内容居中显示
3、效果图说明
对div使用align属性即实现内容居中效果
观察两个DIV盒子内图片，第一个未设置align属性，第二个设置align属性为center实现了DIV内容居中。
二、能否使用css实现align center居中？
答案是可以实现
使用CSS代码为：text-align:center
1、使用CSS代码替代div在使用align=center小例代码如下：
&!DOCTYPE&html&&xmlns=&http://www.w3.org/1999/xhtml&&&&charset=&utf-8&&&align&center小例&&.divcss5{&text-align:center}&&&&&src=&/404-logo.gif&&width=&161&&height=&30&&&&class=&divcss5&&src=&/404-logo.gif&&width=&161&&height=&30&&&&&&
2、同样实现居中效果截图：
使用css text-align替代div align center同样实现DIV内容居中效果
DIVCSS5小结：
可以说直接对div内加align=&center&实现居中 等于 CSS text-align:center居中效果功能完全相同。
相关CSS推荐知识阅读：
5、如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 12:44
原创：本文 DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT
学习与资源分享平台