歡迎來到合肥浪訊網(wǎng)絡(luò)科技有限公司官網(wǎng)
  咨詢服務(wù)熱線:400-099-8848

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

發(fā)布時(shí)間:2024-08-02 文章來源:本站  瀏覽次數(shù):554
用CSS讓元素居中顯現(xiàn)并不是件很簡單的事情—同樣的合法CSS居中設(shè)置在不同瀏覽器中的表現(xiàn)行為卻各有千秋。讓咱們先來看一下CSS中常見的幾種讓元素水平居中顯現(xiàn)的辦法。
 
  1.運(yùn)用主動(dòng)外邊距完成居中
 
  CSS中首選的讓元素水平居中的辦法便是運(yùn)用margin特點(diǎn)—將元素的margin-left和margin-right特點(diǎn)設(shè)置為auto即可。在實(shí)踐運(yùn)用中,咱們可認(rèn)為這些需求居中的元素創(chuàng)建一個(gè)起容器作用的div。需求特別注意的一點(diǎn)便是,有必要為該容器指定寬度:
 
  div#container {
 
  margin-left: auto;
 
  margin-right: auto;
 
  width: 168px;
 
  }
 
  在大多數(shù)主流瀏覽器中,這種辦法都十分有用,即使是Windows平臺(tái)上的IE6,在其規(guī)范兼容形式(compliance mode)下也能夠正常顯現(xiàn)。但不幸的是,在更低版別的IE中,這種設(shè)置卻并不能完成居中作用。所以若想在實(shí)踐項(xiàng)目中運(yùn)用這種辦法,那么就要確保用戶的IE瀏覽器版別不低于6.0。
 
  雖然在支撐上不盡如人意,但大多數(shù)設(shè)計(jì)師都主張盡可能地運(yùn)用這種辦法。該辦法也被認(rèn)為是在各種用CSS完成元素水平居中辦法中正確、合理的一種。
 
  2.運(yùn)用text-align完成居中
 
  另一種完成元素居中的辦法是運(yùn)用text-align特點(diǎn),將該特點(diǎn)值設(shè)置為center并應(yīng)用到body元素上即可。這種做法是徹里徹外的hack,但它卻能兼容大多數(shù)瀏覽器,所以在某些情況下也自然必不可少。
 
  之所以說它是hack,是因?yàn)檫@種辦法并沒有將文本特點(diǎn)應(yīng)用到文本上,而是應(yīng)用到了作為容器的元素上。這也給咱們帶來了額外的工作。在創(chuàng)建好布局有必要的div之后,咱們要按照如下代碼為body應(yīng)用text-align特點(diǎn):
 
  body{
 
  text-align:center;
 
  }
 
  之后會(huì)出現(xiàn)什么問題嗎?body的所有子孫元素都會(huì)被居中顯現(xiàn)。
 
  因而,咱們就需求用再寫一條規(guī)矩,讓其間的文本回到默認(rèn)的居左對齊:
 
  p {
 
  text-align:left;
 
  }   
 
  可以想象這條附加的規(guī)矩將帶來一些不便。別的,真正徹底遵從規(guī)范的瀏覽器并不會(huì)改變?nèi)萜鞯奈恢茫粫?huì)讓其間的文字居中顯現(xiàn)。

上一條:企業(yè)網(wǎng)站建造的重要性...

下一條:CSS常見的讓元素水平居...

日韩中文字幕无码专区,国产成人综合亚洲欧美,日本日本熟妇中文在线视频,久久免费只有精品国产,色综合久久天天,思思re热免费精品,国产精品久久久久久久,国内自产少妇自拍区免费