css - 中心對齊方式不起作用

我試圖使用this jsfiddle來使水平和垂直居中的div保持瀏覽器寬度和高度的100％，其中文本應該垂直和水平居中對齊，但目前文本的第一行與中心對齊，而不是將整個中心點放在三行文本的中心。css - 中心對齊方式不起作用

任何人都知道如何做到這一點？

我的HTML：

<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
     <title>Regret</title> 
     <meta charset="utf-8"> 
     <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah|Bowlby+One+SC' rel='stylesheet' type='text/css'> 
     <link href='css/regret.css' rel="stylesheet"> 
    </head> 

    <body> 
     <div id="container"> 
      <div class="inner"> 
       <h1>Regret</h1> 
       <p class="choice">Let it out</p> 
       <p class="choice">Wallow in it</p> 
      </div> 
     </div> 
    </body> 
</html>

我的CSS：

body { font-family: 'Gloria Hallelujah', cursive; margin:0; text-align:center; color: #5e7c88; } 
h1, h2, h3 { font-family: 'Bowlby One SC', cursive; color: #4b5f6d; } 
img { border: 0; } 

#container { margin: 0 auto; } 
.choice { font-family: 'Bowlby One SC', cursive; } 
.inner { position: absolute; top: 50%; }

來源

2011-12-19 mheavers

這個小提琴應該工作（如果我明白你想要什麼正確的話）：http://jsfiddle.net/7ZSmX/23/。我基本上使用display: table和display: table-cell屬性。

來源

2011-12-19 19:48:33 ksindi

是的，但我不想指定表格的高度（除非該高度爲瀏覽器的100％） – mheavers 2011-12-19 19:56:32

@mheavers。我只是改變了它（見小提琴的答案）。現在檢查出來。它是瀏覽器的100％。 – ksindi 2011-12-19 19:57:22

不錯的一個！瘋狂多少工作你必須去中心對齊 – mheavers 2011-12-19 20:19:35

內改變這種

position:fixed; top: 50%; text-align:center; width:100%;

來源

2011-12-19 19:34:18

看到@John Riselvato的評論 – mheavers 2011-12-19 19:43:34

這裏是修復： http://jsfiddle.net/7ZSmX/13/

.inner { margin-top: 50%; }

是你想要而不是相對的。

來源

2011-12-19 19:37:04

似乎沒有工作，一旦我給文本一個字體大小：http://jsfiddle.net/heaversm/7ZSmX/15/ – mheavers 2011-12-19 19:42:40

http://jsfiddle.net/7ZSmX/ 19 /有你的字體問題。保持一切。內部 – 2011-12-19 19:46:17

不起作用，即使在小提琴 – mheavers 2011-12-19 19:57:00

css - 中心對齊方式不起作用

回答

相關問題