您現在的位置: 网站首頁 / 網站建設 / 正文

用CSS讓元素垂直居中的方法

作者: admin 发布: 2015-6-7 11:28:5 分类: 網站建設 閱讀: 次 查看評論

  [size=3]利用CSS讓元素垂直居中是個很頭疼的問題,這裏就介紹兩種簡單實用的方法

  [/size]

  [size=4]方法一:利用行高(line-height)定位[/size]

  line-height通常是用于調節一段文字的行與行之間的距離,或者說兩行文字之間的距離,如果行高是500px,那麽每一行中的文字距離本行的頂部就是250px,如果將文字的行高設爲500px,並且外面的容器的高度也爲500px,同樣可以實現垂直居中,但是用它來實現垂直居中,也是有缺點的,就是如果內容過多,文字就會跑到下一行,那麽內容就不可能垂直居中了。

  HTML代碼:

  <h1>Hi, I'm<span>Vertically Aligned</span> Within the H1</h1>

  CSS代碼:

  body {

  margin: 0;

  padding: 0;

  background: #1d1d1d;

  font-size: 10px;

  font-family: Verdana, Arial, Helvetica, sans-serif;

  }

  h1 {

  font: 3em Georgia, "Times New Roman", Times, serif;

  color: #fff;

  height: 500px;

  line-height: 500px;

  text-align:center;

  border: 10px solid #999;

  }

  h1 span {

  font-weight: bold;

  font-size:1.5em;

  color: #fff000;

  }

  p {

  font-size: 1.3em;

  color: #999;

  }

  strong {

  color: #fff;

  }

  [size=4]方法二:利用絕對定位

  [/size]

  先來看看效果,查看演示

  這個方法有個缺點我必須指出,就是外面的塊狀元素,必須指定高度,所以如果你在裏面放動態的內容的話,後果會很糟糕滴~

  HTML代碼:

  <div class="vert">

  <h1>Hi, I'm<span>Vertically Aligned</span></h1>

  <p>Abigo sudo mara paulatim odio, accumsan luptatum nibh nibh refero metuo opes ut fatua. Acsi et fere similis <strong>Using</strong> augue <strong>absolute</strong> validus. Regula <strong>positioning</strong> eu jus vel, indoles fere iaceo ea similis. Velit praemitto nulla vel luctus secundum. </p>

  </div>

  CSS代碼:

  這種用絕對定位來實現的垂直居中,取決與元素的寬度和高度,你可以用下面這兩個公式來計算元素的左邊距和上邊距

  元素的宽度/2 = 负左边距

  元素的高度/2 = 负上边距

  在這個例子中,我們就是這麽計算的

  .vert {

  width: 580px;

  height: 190px;

  position: absolute;

  top: 50%;

  left: 50%;

  margin: -95px 0 0 -290px;

  }

  完整CSS代碼

  body {

  margin: 0;

  padding: 0;

  background: #1d1d1d;

  font-size: 10px;

  font-family: Verdana, Arial, Helvetica, sans-serif;

  }

  h1 {

  font: 4em Georgia, "Times New Roman", Times, serif;

  color: #fff;

  border-bottom: 5px dotted #999;

  margin: 0;

  padding: 0 0 10px;

  }

  h1 span {

  font-weight: bold;

  display:block;

  font-size:1.5em;

  color: #fff000;

  }

  p {

  font-size: 1.3em;

  color: #999;

  }

  strong {

  color: #fff;

  }

  .vert {

  width: 580px;

  height: 190px;

  position: absolute;

  top: 50%;

  left: 50%;

  margin: -95px 0 0 -290px;

  }

  [size=4]問題延伸

  [/size]

  如果元素的外面還有一個父級元素,如果才能讓元素垂直居中于父級元素內部?比如下面的代碼,多了一個父級元素

  <div class="container">

  <div class="vert">

  <h1>Hi, I'm Nested &<span>Vertically Aligned</span></h1>

  <p>Abigo sudo mara paulatim odio, accumsan luptatum nibh nibh refero metuo opes ut fatua. Acsi et fere similis <strong>Using</strong> augue <strong>absolute</strong> validus. Regula <strong>positioning</strong> eu jus vel, indoles fere iaceo ea similis. Velit praemitto nulla vel luctus secundum. </p>

  </div>

  </div>

  这时候,就必须在定义父级元素的CSS代码中加入position: relative;才能够使内部元素垂直居中于父级内部,代码如下:

  .container {

  position: relative;

  height: 500px;

  width: 800px;

  border: 10px solid #999;

  background: #000;

  margin: 20px;

  }

  來源:SEO搜尋引擎優化 - SEO自學網 轉載注明出處!

? 上一篇下一篇 ?   本文關鍵詞: CSS  

評論列表:

站長SEO學院
第一節:百度搜索引擎工作原理
第二節:建設對搜索引擎友好的站點
第三節:如何進行網站內容建設
第四節:整體優化、結構優化、網頁優化
第五節:移動搜索-明確移動搜索優化標准
百度SEO資料文檔
百度搜索引擎優化指南2.0
百度移動搜索優化指南2.0
網站分析白皮書(站長版)
移動站點該如何優化
建設對百度友好的站點
百度搜索引擎網頁質量白皮書
石榴算法-綠蘿算法-冰桶算法
新搜索時代下的優化策略
更多百度SEO資料文檔
站長推薦
DIV+CSS布局實例教程-Web標准
网站SEO優化常见问题汇总
SEO優化推广方案该如何写
SEO優化方案步骤
影響網站關鍵詞排名因素總結
影響谷歌搜索引擎排名的因素調查
手機移動端站點適配優化
最近發表