爲什麼我的CSS邊框會轉到頁面的末尾？

我一直在用codecademy學習HTML/CSS，並且我的CSS邊框有這個問題。我需要我的h1以邊框爲中心，但我不希望該邊框轉到頁面的末端。這裏是我的代碼爲什麼我的CSS邊框會轉到頁面的末尾？

<h1 style="color:#0034ff; padding:20px; border-style:ridge; border-width:5px; text-align:center;">HTML Testing Page</h1>

我計劃很快使一個單獨的樣式表，我只是把CSS的HTML文檔中對其進行測試。這個邊界到達頁面的末尾，如果我把display：inline或display：inline-block，我的文本不再居中。我怎樣才能讓邊界就在文本旁邊而不犧牲居中文本？

來源

2012-09-17 WillumMaguire

事實上，h1是block element，但我認爲你正在尋找這樣的：

h1 { 
    color:#0034ff; 
    padding:20px; 
    border-style:ridge; 
    border-width:5px; 
    margin: 0 auto; /* <--- */ 
    display: table; /* <--- */ 
}

這將居中標題沒有它取父母的整個寬度。

http://jsfiddle.net/rm3Fk/11/

來源

2012-09-17 12:51:12

display:inline-block添加

h1標籤是塊元件因此被佔據整個空間。

演示http://jsfiddle.net/rm3Fk/

如果你想h1標籤居中對齊的頁面，那麼你可以使用display:table; margin:0 auto

演示http://jsfiddle.net/rm3Fk/17/

來源

2012-09-17 12:38:48 Sowmya

的標題不集中，我（鉻18.0.1025.168的Ubuntu 12.04） –

雅在這種情況下表是好的，你的回答。我回答擺脫全寬邊框 – Sowmya

感謝複製... –

嗨現在用於display:inline-block;在h1標籤

<h1 style="color:#0034ff; padding:20px; border-style:ridge; border-width:5px;display:inline-block; text-align:center;">HTML Testing Page</h1>

所有標題元素是塊元

Demo

來源

2012-09-17 12:38:54

爲什麼我的CSS邊框會轉到頁面的末尾？

回答

相關問題