tion %> 山东麻将教学视频
當前位置:首頁 > 建站知識

未知高度的非表格垂直對齊

更新時間:2009.06.21 瀏覽次數:

非已知高度的垂直對齊的條件

  • 表格單元格
  • 行內塊(inline-block)

第一個比較好理解,第二個很多人可能會忽略。比如,很多人在圖片與文本混排的時候想讓圖片相對于文本垂直居中除了用IE的私有特性 valign="absmiddle"別無他法。記住,默認下圖片就是屬于inline-block,你只需簡單的img {vertical-align:middle;}即可。

那么,我們進入主題。現在我們由于某些特殊需要兩個并排的div想實現垂直居中。如前所述,div非表格,但是當代的瀏覽器中除了IE都支持display:table-cell。恰好,IE支持dispaly:inline-block,那么我們就用兩種方式為當代瀏覽器實現非表格的垂直居中,殊途同歸。

HTML如下:

<div id="div1">blah blah...看見我居中了嗎?</div>
<div id="div2">
 <p>blah blah...</p>
 ....
</div>

CSS如下:

#div1, #div2 {display:table-cell; *display: inline; zoom:1; vertical-align:middle;}

我們來重點分析CSS。如您所知,*property是一個只有IE(包括IE7)才能解析的hack. 那么為何是inline而不是inline-block呢?這跟IE的變態工作方式有關,具體不深究。在此你只需知道加上zoom:1后,就等價于inline-block。另外,如果是a, span等非block的元素,則按正常方式display:inline-block。

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="developer" content="Realazy" />
<title>未知高度,div垂直居中的一個跨瀏覽器方案</title>
<style type="text/css" media="screen">
/* <![CDATA[ */
 #div1, #div2 {display:table-cell; *display: inline; zoom:1; vertical-align:middle;}
 #div1 {color:red;}
/* ]]> */
</style>

</head>
<body>
<h1>未知高度,<code>div</code>垂直居中的一個跨瀏覽器方案</h1>
<p>返回<a href="http://www.blueidea.com/tech/web/2007/4629.asp">未知高度的非表格垂直對齊</a></p>
<div id="bd">
 <div id="div1">blah blah...看見我居中了嗎?</div>
 <div id="div2">
  <p>blah blah...</p>
  <p>blah blah...</p>
  <p>blah blah...</p>
  <p>blah blah...</p>
  <p>blah blah...</p>
  <p>blah blah...</p>
  <p>blah blah...</p>
  <p>blah blah...</p>
  <p>blah blah...</p>
  <p>blah blah...</p>
  <p>blah blah...</p>
  <p>blah blah...</p>
  <p>blah blah...</p>
  <p>blah blah...</p>
  <p>blah blah...</p>
 </div>
</div>
</body>
</html>

烟台麻将规则 短线股票推荐黑马 广东麻将教学视频教程 德州哪有玩麻将的 大资本配资 安徽十一选五开奖 山东省11选5 秒速牛牛网-首页 中国体育竞彩足球比分直播 世界杯塞内加尔比分预测 智财资本 湖南快乐10分 最新东京热 n0732 1分彩走势图怎么分析 明星江苏麻将漏洞 安徽红中麻将作弊器 股票涨跌停计算