似乎無法將我的 h1 居中？
[英]Can't seem to center my h1?
問題描述
我正在嘗試一些隨機的東西，似乎偶然發現了一個奇怪的小煩惱。 我無法將 H1 居中，我嘗試在內容div和h1本身上進行文本對齊，但沒有效果。
有人能看到我犯的錯誤嗎？ 這一定是我忽略的一些簡單的事情。
我的英雄在哪里？ :D
這是我的 css/div 的鏈接，它是一個圖像。
它並沒有完全居中：(
這是我的 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;
}
8 個解決方案
解決方案1
3 2015-07-27 11:32:20
有時 H1 中的文本會與它之前的元素糾纏在一起。 添加頂部邊距將釋放它。
h1 {
margin-top: 40px;
}
解決方案2
3 2020-09-10 04:48:36
我可以看到很多答案都提到了給出寬度。
注意：- 如果顯示類型是內聯的，則不會應用寬度和高度屬性。
如果 display 屬性設置為 inline，則寬度將自動設置為內容的寬度。
如果您希望元素內聯並且還特別具有一些寬度或高度，那么您應該將 display 屬性設置為inline-block 。
詳細解釋https://css-tricks.com/almanac/properties/d/display/
解決方案3
2 已采納 2013-08-31 15:38:48
您正在使用樣式display:inline; 如果沒有寬度樣式，這將使元素與h1的文本將占據的大小完全相同。
要使文本居中，您需要給它一個width並將text-align設置為center
h1 {
display:inline;
width:200px;
text-align:center;
}
或者使用display:inline並設置text-align:center ，因為標題元素默認是塊級元素，它將占據它所能達到的全部寬度。
h1 {
text-align:center;
}
解決方案4
1 2017-04-03 15:46:41
您需要添加寬度。 這將起作用：
h1
{
width:100%;
display: inline;
background-color: red;
color: white;
font-weight: bold;
text-align: center;
font-size: 2.5em;
}
解決方案5
0 2013-08-31 15:20:35
我認為您需要從已應用於 h1 標記的 css 中刪除display:inline ，然后嘗試為其設置text-align居中text-align方式。 如果這不起作用，請要么 -
- 嘗試在 jsFiddle 上重現該問題
- 將我們鏈接到您的網站。
解決方案6
0 2013-08-31 16:29:29
這是來自 W3schools，它在我的 Wordpress html 中工作。
<html>
<head>
<style>
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>
解決方案7
0 2017-03-02 14:52:36
我沒有閱讀你的代碼，但檢查周圍的浮動元素，它們會導致問題。 我實際上是在閱讀本文以獲得答案並且頓悟了，我沒有 {display:none} 移動導航漢堡圖標，這導致我的標題在我沒有添加的一側有一個空格。 希望這可以幫助某人。
解決方案8
0 2019-09-27 16:02:37
這一張將我的個人資料圖片集中在我的網站上......這對我來說是有其他修改的。
`top: 50%;
left: 50%;
transform: translate(-50% , -50%);
position: absolute;`
似乎無法使用.innerHTML將文本添加到H1標記
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.