在以下文檔中，是否可以水平居中內部div，或以其他方式使文本V和H都以outer class div爲中心？垂直和水平居中文本

一些限制（抱歉在開始時沒有指定）： 1.不應指定固定寬度，因爲否則解決方案是微不足道的; 2.沒有JavaScript，只是純粹的CSS和HTML。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>the title</title> 
    <style> 

     div.outer { 
      /* ? */ 
     } 

     div.inner { 
      display: table-cell; 
      min-height: 100px; 
      vertical-align: middle; 
     } 

    </style> 
    </head> 
    <body> 
    <div class="outer"> 
     <div class="inner"> 
      <p>Vertically centered text. How to center it horizontally?</p> 
     </div> 
    <div> 
    </body> 
</html>

2012-09-29 Petr Abdulin

試試這個：

.outer { 
    display: table; 
    width: 100%; 
} 
.inner { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
}

demo

它不使用JavaScript和它不需要你修復width/height/line-height。

來源

2012-09-29 09:55:20 Ana

似乎它的工作完美！非常感謝！ –

看看this教程。您需要將line-height和width 添加到您的CSS以使其工作。

來源

2012-09-29 09:43:04

如果是單個文本行，你可以使用：

div.inner { 
    line-height: 100px; 
}

多行是棘手的，因爲瀏覽器支持的用武之地。雖然我發現使用jQuery來檢測div.outer的大小&，然後創建pad是最可靠的方法。

$(document).ready(function() { 
    var whitespace = $("div.outer").innerHeight() - $("div.inner").innerHeight(); 
    var padding = Math.round(whitespace/2); 
    $("div.inner").css({ 
    "padding-top": padding + "px"; 
    }); 
});

來源

2012-09-29 09:51:25 Atari

感謝行高選項，它在一行文本情況下當然是有用的。 –

在搜索了幾個小時後，我終於找到了一個解決方案，用於在另一個div的水平和垂直方向上集中div。

 div.parent { 
      display: block; 
      text-align: center; 
      line-height: 300px; /* the height of parent div */ 
     } 
     div.child { 
      display: inline-block; 
      vertical-align: middle; 
     }

它不使用絕對定位，所以你不需要FIX兒童寬度/高度。
它不使用display：table/tablecell，這在某些版本的IE中不受支持。
這是一個純粹的CSS解決方案，即使動態加載子div，也無需編寫javascript。

希望這可以幫助爲此受苦的人。

來源

2013-07-16 14:09:21 NeoWang

垂直和水平居中文本

回答

demo

相關問題