色老头久久久久久久久久-av日韩天堂在线播放-日韩欧美高清第一区-日本熟女人妻一区二区-一区在线播放观看视频-极品校花挺进后臀呻吟视频-麻豆公司传媒在线观看-人妻少妇精彩视品一区二区三区-中文字幕免费视频精品一区观看

武漢網(wǎng)訊互聯(lián)專業(yè)從事

武漢建網(wǎng)站

及相關(guān)業(yè)務(wù),是

武漢做網(wǎng)站

公司的佼佼者,電話/微信咨詢:18986172926

CSS常見的讓元素水平居中顯現(xiàn)辦法(二)

更新日期:2024-10-08 16:06:16 文章編輯:網(wǎng)訊互聯(lián) 瀏覽次數(shù):775

上一篇我們講了CSS常見的讓元素水平居中顯現(xiàn)辦法(一),今天我們接著講辦法二:


  3.組合使用主動(dòng)外邊距和文本對(duì)齊
  因?yàn)槲谋緦?duì)齊居中辦法有著杰出的向下兼容性,且主動(dòng)外邊距辦法也被大多數(shù)當(dāng)代瀏覽器支撐,所以很多設(shè)計(jì)師將二者組合起來使用,以期讓居中作用得到大極限的跨瀏覽器支撐:


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

  可是這始終是個(gè)hack,無論如何也算不上完美。咱們?nèi)允切枰獮榫又腥萜髦械奈谋揪帉懜郊拥囊?guī)則,但至少在各個(gè)瀏覽器中看起來都不錯(cuò)。


  4.負(fù)外邊距解決計(jì)劃


  負(fù)外邊距解決計(jì)劃遠(yuǎn)不是僅僅為元素增加負(fù)外邊距這么簡(jiǎn)略。這種辦法需要同時(shí)使用絕對(duì)定位和負(fù)外邊距兩種技巧。
  下面是該計(jì)劃的具體實(shí)現(xiàn)辦法。首先,創(chuàng)建一個(gè)包含居中元素的容器,然后將其絕對(duì)定位于相對(duì)頁(yè)面左邊邊際50%的方位。這樣,該容器的左外邊距將從頁(yè)面50%寬度的方位開始算起。
  然后,將容器的左外邊距值設(shè)置為負(fù)的容器寬度的一半。這樣即可將該容器固定在頁(yè)面水平方向的中點(diǎn)。
  #container {
  background: #ffc url(mid.jpg) repeat-y center;
  position: absolute;
  left: 50%;
  width: 760px;
  margin-left: -380px;
  }   
  看,沒有任何hack!盡管這并不是首選的解決計(jì)劃,但也是個(gè)不錯(cuò)的辦法,且適用性極廣—甚至在Netscape Navigator 4.x中都沒有任何問題,很令人吃驚,不是嗎?所以若想得到廣泛的瀏覽器支撐,那么這種辦法將會(huì)是好的挑選。


標(biāo)簽:
將文章分享到..