如何在段落上方居中这个标题？答案

【问题标题】：How to center this heading above paragraph?如何在段落上方居中这个标题？
【发布时间】：2019-07-31 16:22:22
【问题描述】：

我正在开发一个网站，其中每个页面都有一个标题、一个小段落和一张图片。我需要将标题直接放在段落上方，但我无法弄清楚如何为不同长度的标题执行此操作。适用于短标题的方法不适用于较长的标题。

我一直在尝试不同的属性，例如 position: absolute 等，但我没有找到任何可以提供我需要的结果的东西。有人可以帮忙吗？

p {
  background-color: green;
  padding: 15px;
  border-radius: 25px;
  height: 150px;
  width: 200px;
  position: absolute;
  top: 20%;
  left: 5%;
  z-index: 2;
  color: black;
}

img {
  height: 250px;
  margin: 10px;
  position: absolute;
  left: 39%;
  top: 10%;
  border: 10px solid white;
}

h1 {
  text-align: left;
}

<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<img src="https://images.pexels.com/photos/2356045/pexels-photo-2356045.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
</div>

【问题讨论】：

我不知道这是否可行，但它真的很简单。尝试在“标题”一词之前添加空格。
@FuzzySquid 不，这行不通
只是你想让标题居中在段落上方我是对的？@Leia_Organa
哦。是因为 HTML 去掉了空格吗？
您的 html 中有一个结束 </div> 标记，但没有开始标记

标签： html css text alignment

【解决方案1】：

我看到你在底部有一个 div，你在 H1 标签上方有一个开始 div 吗？

一种方法是这样做：

 h1{
    text-align:center;
 }

或者给那个H1标签一个类名，这样你就只会影响那些有那个类名的人

.page-title{
    text-align:center;
}    

<h1 class="page-title">

【讨论】：

【解决方案2】：

我是在代码笔中完成的。所以我所做的是删除position: absolute;，因为位置变得棘手，而是在内容和图像周围添加div，并将display: inline-block; 添加到div。最后，我在h1 代码笔上将text-align: left; 更改为text-align: center;，可以在这里找到：https://codepen.io/the_legitTDM/pen/WVOvjp

【讨论】：

【解决方案3】：

你期待这样吗：

div {
width: 200px;
position: absolute;
left: 5%;
color: black;
}
p{
background-color: green;
border-radius: 25px;
padding: 15px;
height: auto;    
}

img {
height: 250px;
margin: 10px;
position: absolute;
left: 39%;
top: 12%;
border: 10px solid white;
}

h1 {
text-align: center;
}

  <div>
    <h1>Heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <img src="https://images.pexels.com/photos/2356045/pexels-photo-2356045.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">

【讨论】：