Question

我正在尝试一些随机的东西，似乎偶然发现了一个奇怪的小烦恼。我无法将H1置于中心，我尝试对内容div和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;
}

Answer 1

有时H1内的文本会与之前的元素纠缠在一起。添加上边距将释放它。

h1 {
  margin-top: 40px;
}

Answer 2

您使用的是没有宽度样式的样式display:inline;，这会使元素的大小与h1的文本完全相同。

要设置文本中心，您需要为其设置width并将text-align设置为center

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

或取display:inline并设置text-align:center，因为标题元素默认为块级元素，它将占用整个宽度。

h1 {
   text-align:center;
}

Answer 3

我可以看到提到了许多给出宽度的答案。

注意：-如果显示类型为嵌入式，则应用width和height属性不要。

如果display属性设置为inline，则宽度将自动设置为内容的宽度。
如果希望元素为内联并且还具有特定的宽度或高度，则应将display属性设置为 inline-block 。

详细说明https://css-tricks.com/almanac/properties/d/display/

Answer 4

我认为您需要从css中删除已应用于h1标记的display:inline，然后尝试将其设为text-align中心。如果这不起作用，请 -

尝试在jsFiddle上重现问题
将我们链接到您的网站。

Answer 5

这是来自W3schools，它在我的Wordpress中以html工作。

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

Answer 6

我还没有读过您的代码，但检查周围的浮动元素，它们可能会导致问题。我实际上是在阅读这个以寻找答案和顿悟，我没有{display：none}移动导航汉堡包图标，这导致我的标题在我没有添加的一侧有一个空间。希望这有助于某人。

Answer 7

您需要添加宽度。这将有效：

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

Answer 8

此人将我的个人资料照片放在我的网站中... 这项工作对我来说还有其他修改。

`top: 50%;
left: 50%;
transform: translate(-50% , -50%);
position: absolute;`

似乎无法居中我的h1？

8 个答案: