安全黑客
当前位置:安全黑客文章资讯网站建设网站美工
日期:2009-12-15 23:11:00  来源:本站整理

<b>CSS 让元素水平居中的显示办法</b>[网站美工]

赞助商链接



  本文“<b>CSS 让元素水平居中的显示办法</b>[网站美工]”是由安全黑客为您精心收集,来源于网络转载,文章版权归文章作者所有,本站不对其观点以及内容做任何评价,请读者自行判断,以下是其具体内容:

用CSS让元素居中显示并非件很简单的事情—一样的合理CSS居中设置在差别浏览器中的表现行为却各有所长.让我们先来看一下CSS中常见的几种让元素水平居中显示的办法.

1.利用自动外边距实现居中
 

CSS中首选的让元素水平居中的办法就是利用margin属性—将元素的margin-left和margin-right属性设置为auto便可.在实际利用中,我们可认为这些需求居中的元素成立一个起容器作用的div.需求分外注意的一点就是,必须为该容器指定宽度:
  div#container {

  margin-left: auto;

  margin-right: auto;

  width: 168px;

  }

在大大都主流浏览器中,这种办法都非常有效,即便是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:center;

  }

  之后会呈现什么问题吗?body的全部子孙元素城市被居中显示.
  因此,我们就需求用再写一条法则,让此中的文本回到默许的居左对齐:

  p {
  text-align:left;
  }
 

  可以想象这条附加的法则将带来一些不便.别的,真正完好遵守尺度的浏览器并不会改变容器的位置,而只会让此中的文字居中显示.
 

3.组合利用自动外边距和文本对齐
 

因为文本对齐居中方法有着杰出的向下兼容性,且自动外边距方法也被大大都现代浏览器支持,所以很多计划师将二者组合起来利用,以期让居中效果得到最大限度的跨浏览器支持:

  body {
  text-align: center;
  }
  #container {
  margin-left: auto;
  margin-right: auto;
  border: 1px solid red;
  width: 168px;
  text-align: left
  }
 

  但是这始终是个hack,无论若何也算不上完善.我们还是需求为居中容器中的文本编写附加的法则,但至少在各个浏览器中看起来都不错.
 

4.负外边距办理筹划
 

负外边距办理筹划远不是仅仅为元素增添负外边距这么简单.这种办法需求同时利用绝对定位和负外边距两种本领.
 

下面是该筹划的具体实现办法.首先,成立一个包含居中元素的容器,然后将其绝对定位于相对页面左边边沿50%的位置.这样,该容器的左外边距将从页面50%宽度的位置开始算起.
  然后,将容器的左外边距值设置为负的容器宽度的一半.这样便可将该容器固定在页面水平方向的中点.

  #container {
  background: #ffc url(mid.jpg) repeat-y center;
  position: absolute;
  left: 50%;
  width: 760px;
  margin-left: -380px;
  }
 

看,没有任何hack!固然这并非首选的办理筹划,但也是个不错的办法,且实用性极广—乃至在Netscape Navigator 4.x中都没有任何问题,很令人吃惊,不是吗?所以若想得到最遍及的浏览器支持,那么这种办法将会是最好的挑选.


  以上是“<b>CSS 让元素水平居中的显示办法</b>[网站美工]”的内容,如果你对以上该文章内容感兴趣,你可以看看安全黑客为您推荐以下文章:
  • HP智能管理中心FaultDownloadServlet信息泄露漏洞
  • Palo Alto Networks的防火墙到一个新的水平
  • LTE带来了新的安全问题,电信运营商
  • iPhone的Multi-Touch技术的MacBook在10月?
  • McAfee的SmartFilter管理服务器SFAdminSrv.exe JBoss的RMI远程执行代码Vulnerabilty
  • Oracle表格识别CroScPlt.dll ActiveX控件远程代码执行Vulnerabilty
  • Oracle的WebCenter表格识别Sssplt30.ocx ActiveX控件远程代码执行Vulnerabilty的
  • RealNetworks公司的RealPlayer IVR MLTI块长度解析远程代码执行漏洞
  • HP Data Protector的笔记本电脑扩展策略服务器LogBackupLocationStatus远程SQL注入Vulnerabilty
  • HP Data Protector的笔记本扩展策略服务器LogClientInstallation远程SQL注入Vulnerabilty
  • HP Data Protector的笔记本扩展GetPolicies远程SQL注入Vulnerabilty
  • HP Data Protector的笔记本电脑扩展策略服务器RequestCopy远程SQL注入Vulnerabilty
  • 本文地址: 与您的QQ/BBS好友分享!

    文章评论评论内容只代表网友观点,与本站立场无关!

       评论摘要(共 0 条,得分 0 分,平均 0 分) 查看完整评论
    免责条款 - 广告合作 - 下载声明 - 欢迎投稿 - 友情连接 - 网站地图 -
    Copyright © 2012-2013 www.110hack.com. All Rights Reserved .