1

我正在尝试一些随机的东西，似乎偶然发现了一个奇怪的小烦恼。我无法将 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;
}
4

8 回答 8

3

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

h1 {
  margin-top: 40px;
}
于 2015-07-27T11:32:20.630 回答
3

我可以看到很多答案都提到了宽度。

注意：-如果显示类型是内联的，则不会应用宽度和高度属性。

如果显示属性设置为内联宽度将自动设置为内容的宽度。
如果您希望元素是内联的并且还特别具有一些宽度或高度，那么您应该将 display 属性设置为inline-block。


详解https://css-tricks.com/almanac/properties/d/display/

于 2020-09-10T04:48:36.603 回答
2

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

要使文本中心，您需要给它一个width并设置text-align为center

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

或采用display:inlineand just set text-align:center，因为默认情况下，标题元素是块级元素，它将占据它可以占据的全部宽度。

h1 {
   text-align:center;
}
于 2013-08-31T15:38:48.640 回答
1

您需要添加一个宽度。这将起作用：

h1
{
    width:100%;
    display: inline;
    background-color: red;
    color: white;
    font-weight: bold;
    text-align: center;
    font-size: 2.5em;   
}
于 2017-04-03T15:46:41.383 回答
0

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

  1. 尝试在 jsFiddle 上重现该问题
  2. 将我们链接到您的网站。
于 2013-08-31T15:20:35.750 回答
0

这是来自 W3schools，它可以在我的 html 中的 Wordpress 中使用。

<html>
<head>
<style>
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>
于 2013-08-31T16:29:29.957 回答
0

我没有阅读您的代码，但检查周围的浮动元素，它们可能会导致问题。我实际上是在阅读这篇文章以获得答案并且顿悟了，我没有{display：none}'d mobile-nav hamburger icon，这导致我的标题在我没有添加的一侧有一个空间。希望这可以帮助某人。

于 2017-03-02T14:52:36.380 回答
0

这一个在我的网站上以我的个人资料图片为中心......这对我来说还有其他修改。

`top: 50%;
left: 50%;
transform: translate(-50% , -50%);
position: absolute;`
于 2019-09-27T16:02:37.790 回答