股票官网

当前位置:错新网文章中心网站设计WEB标准 → CSS常见的让元素水平居中显示的方法

CSS常见的让元素水平居中显示的方法

减小字体 增大字体 作者:admin  来源:www.cuoxin.com  发布时间:2011-2-14 2:04:27

  YONGCSSRANGYUANSUJUZHONGXIANSHIBINGBUSHIJIANHENJIANDANDESHIQING—TONGYANGDEHEFACSSJUZHONGSHEZHIZAIBUTONGLIULANQIZHONGDEBIAOXIANXINGWEIQUEGEYOUQIANQIU。RANGWOMENXIANLAIKANYIXIACSSZHONGCHANGJIANDEJIZHONGRANGYUANSUSHUIPINGJUZHONGXIANSHIDEFANGFA。

股票官网  1.SHIYONGZIDONGWAIBIANJUSHIXIANJUZHONG

  CSSZHONGSHOUXUANDERANGYUANSUSHUIPINGJUZHONGDEFANGFAJIUSHISHIYONGmarginSHUXING—JIANGYUANSUDEmargin-leftHEmargin-rightSHUXINGSHEZHIWEIautoJIKE。ZAISHIJISHIYONGZHONG,WOMENKEYIWEIZHEIXIEXUYAOJUZHONGDEYUANSUCHUANGJIANYIGEQIRONGQIZUOYONGDEdiv。XUYAOTEBIEZHUYIDEYIDIANJIUSHI,BIXUWEIGAIRONGQIZHIDINGKUANDU:

  div#container {

  margin-left: auto;

股票官网  margin-right: auto;

股票官网  width: 168px;

  }


股票官网  ZAIDADUOSHUZHULIULIULANQIZHONG,ZHEIZHONGFANGFADOUFEICHANGYOUXIAO,JISHISHIWindowsPINGTAISHANGDEIE6,ZAIQIBIAOZHUNJIANRONGMOSHI(compliance mode)XIAYENENGGOUZHENGCHANGXIANSHI。DANBUXINGDESHI,ZAIGENGDIBANBENDEIEZHONG,ZHEIZHONGSHEZHIQUEBINGBUNENGSHIXIANJUZHONGXIAOGUO。SUOYIRUOXIANGZAISHIJIXIANGMUZHONGSHIYONGZHEIZHONGFANGFA,NEIMEJIUYAOQUEBAOYONGHUDEIELIULANQIBANBENBUDIYU6.0。

股票官网  JINGUANZAIZHICHISHANGBUJINRURENYI,DANDADUOSHUSHEJISHIDOUJIANYIJINKENENGDISHIYONGZHEIZHONGFANGFA。GAIFANGFAYEBEIRENWEISHIZAIGEZHONGYONGCSSSHIXIANYUANSUSHUIPINGJUZHONGFANGFAZHONGZUIZHENGQUE、ZUIHELIDEYIZHONG。

  2.SHIYONGtext-alignSHIXIANJUZHONG

  LINGYIZHONGSHIXIANYUANSUJUZHONGDEFANGFASHISHIYONGtext-alignSHUXING,JIANGGAISHUXINGZHISHEZHIWEIcenterBINGYINGYONGDAObodyYUANSUSHANGJIKE。ZHEIZHONGZUOFASHICHETOUCHEWEIDEhack,DANTAQUENENGJIANRONGDADUOSHULIULANQI,SUOYIZAIMOUXIEQINGKUANGXIAYEZIRANBIBUKESHAO。

  之所以说它是hack,是因为这种方法并没有将文本属性应用到文本上,而是应用到了作为容器的元素上。这也给我们带来了额外的工作。在创建好布局必须的div之后,我们要按照如下代码股票官网为body应用text-align属性:

 

 body{

  text-align:center;

  }


股票官网  ZHIHOUHUICHUXIANSHENMEWENTIMA?bodyDESUOYOUZISUNYUANSUDOUHUIBEIJUZHONGXIANSHI。

  YINCI,WOMENJIUXUYAOYONGZAIXIEYITIAOGUIZE,RANGQIZHONGDEWENBENHUIDAOMORENDEJUZUODUIQI:

 

 p {

  text-align:left;

  }

股票官网  KEYIXIANGXIANGZHEITIAOFUJIADEGUIZEJIANGDAILAIYIXIEBUBIAN。LINGWAI,ZHENZHENGWANQUANZUNXUNBIAOZHUNDELIULANQIBINGBUHUIGAIBIANRONGQIDEWEIZHI,ERZHIHUIRANGQIZHONGDEWENZIJUZHONGXIANSHI。

股票官网  3.ZUHESHIYONGZIDONGWAIBIANJUHEWENBENDUIQI

  YINWEIWENBENDUIQIJUZHONGFANGSHIYOUZHELIANGHAODEXIANGXIAJIANRONGXING,QIEZIDONGWAIBIANJUFANGSHIYEBEIDADUOSHUDANGDAILIULANQIZHICHI,SUOYIHENDUOSHEJISHIJIANGERZHEZUHEQILAISHIYONG,YIQIRANGJUZHONGXIAOGUODEDAOZUIDAXIANDUDEKUALIULANQIZHICHI:

  

body {

  text-align: center;

  }

  #container {

股票官网  margin-left: auto;

股票官网  margin-right: auto;

  border: 1px solid red;

股票官网  width: 168px;

  text-align: left

  }

 

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

  4.FUWAIBIANJUJIEJUEFANGAN

  FUWAIBIANJUJIEJUEFANGANYUANBUSHIJINJINWEIYUANSUTIANJIAFUWAIBIANJUZHEIMEJIANDAN。ZHEIZHONGFANGFAXUYAOTONGSHISHIYONGJUEDUIDINGWEIHEFUWAIBIANJULIANGZHONGJIQIAO。

  XIAMIANSHIGAIFANGANDEJUTISHIXIANFANGFA。SHOUXIAN,CHUANGJIANYIGEBAOHANJUZHONGYUANSUDERONGQI,RANHOUJIANGQIJUEDUIDINGWEIYUXIANGDUIYEMIANZUOBIANBIANYUAN50%DEWEIZHI。ZHEIYANG,GAIRONGQIDEZUOWAIBIANJUJIANGCONGYEMIAN50%KUANDUDEWEIZHIKAISHISUANQI。

股票官网  RANHOU,JIANGRONGQIDEZUOWAIBIANJUZHISHEZHIWEIFUDERONGQIKUANDUDEYIBAN。ZHEIYANGJIKEJIANGGAIRONGQIGUDINGZAIYEMIANSHUIPINGFANGXIANGDEZHONGDIAN。

  #container {

  background: #ffc url(mid.jpg) repeat-y center;

  position: absolute;

股票官网  left: 50%;

  width: 760px;

  margin-left: -380px;

  }

  KAN,MEIYOURENHEhack!SUIRANZHEIBINGBUSHISHOUXUANDEJIEJUEFANGAN,DANYESHIGEBUCUODEFANGFA,QIESHIYONGXINGJIGUANG—SHENZHIZAINetscape Navigator 4.xZHONGDOUMEIYOURENHEWENTI,HENLINGRENCHIJING,BUSHIMA?SUOYIRUOXIANGDEDAOZUIGUANGFANDELIULANQIZHICHI,NEIMEZHEIZHONGFANGFAJIANGHUISHIZUIHAODEXUANZE。


本文引用网址:

在下列搜索引擎中搜索“CSS常见的让元素水平居中显示的方法”的相关信息:

谷歌搜索 百度搜索 雅虎搜索 搜狗搜索 搜搜搜索 必应搜索 有道搜索
你可能还喜欢以下文章
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1如何做SEO才能让百度喜欢?
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5
    • ·上一篇文章:
    • ·下一篇文章:

    赞助商广告

    其他网友在看

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    图片文章导读

    股票官网相关的文章阅览

    热门文章导读