似乎無法居中我的h1？

我正在嘗試一些隨機的東西，似乎偶然發現了一個奇怪的小煩惱。我不能居中我的H1，我試圖對內容div和h1本身進行文本對齊，沒有任何效果。似乎無法居中我的h1？

有人可以看到我正在犯的錯誤嗎？它一定是我忽略的簡單東西。

我的英雄在哪裏？：D

這是我的css/div，它的一個圖像的鏈接。

enter image description here

它不會在中間正好:(

enter image description here

以下爲本是我的HTML：

<div id="content"> 
    <h1>Solid Design</h1>   
</div>

和CSS：

h1 
{ 
    display: inline; 
    background-color: red; 
    color: white; 
    font-weight: bold; 
    text-align: center; 
    font-size: 2.5em; 
} 

#content 
{ 
    text-align: center; 
} 
#content p 
{ 
    width: 750px; 
}

來源

2013-08-31 Stefano Peeters

對不起，請減少代碼到一個小例子，再現問題。沒有人想要挖掘這一點。 – arkascha

請在這裏發佈你的代碼的相關部分，而不是在圖像中。即立即在你的h1和你正在使用的CSS風格的HTML。 –

您應該嘗試在JSFiddle中重現該問題。然後發佈代碼和鏈接到小提琴。 –

我想你需要從你的css中刪除你的display:inline，你已經應用到h1標籤，然後嘗試給它一箇中心的text-align。如果還是不行，請要麼 -

嘗試重現該問題上的jsfiddle
我們鏈接到你的網站。

來源

2013-08-31 15:20:35

它保持在同一個地方。沒有工作。 –

然後你最好鏈接到你的頁面，或創建一個鏈接到jsFiddle，就像其他人提到的一樣。 –

您正在使用的樣式display:inline;沒有寬度的風格，這將使正是元素的h1的文本將佔用的大小。

爲了讓你需要給它一個width文中心，並設置text-align到center

h1 { 
    display:inline; 
    width:200px; 
    text-align:center; 
}

或採取display:inline和剛剛成立text-align:center，因爲頭元素都默認一個塊級元素，它將佔據它的全部寬度。

h1 { 
    text-align:center; 
}

來源

2013-08-31 15:38:48

很好的答案，謝謝。 –

這是來自W3schools，它在我的Wordpress中的HTML工作。

<html> 
<head> 
<style> 
h1 {text-align:center} 
h2 {text-align:left} 
h3 {text-align:right} 
</style> 
</head>

來源

2013-08-31 16:29:29 Katalina

有時H1內部的文本與之前的元素糾纏在一起。添加頂部邊距將釋放它。

h1 { 
    margin-top: 40px; 
}

來源

2015-07-27 11:32:20 chelahmy

我還沒有讀取您的代碼，但檢查周圍的浮動元素，他們可能會導致問題。我實際上是在閱讀這個答案並且突然顯現，我沒有{display：none}'移動導航漢堡包圖標，這導致我的標題在我沒有添加的一側留有一個空格。希望這可以幫助某人。

來源

2017-03-02 14:52:36

您需要添加寬度。這將工作：

h1 
{ 
    width:100%; 
    display: inline; 
    background-color: red; 
    color: white; 
    font-weight: bold; 
    text-align: center; 
    font-size: 2.5em; 
}

來源

2017-04-03 15:46:41

似乎無法居中我的h1？

回答

相關問題