时间戳

首页 > 解决方案 > 如何在段落上方居中这个标题？

html - 如何在段落上方居中这个标题？

问题描述

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

我一直在尝试不同的属性，如位置：绝对等，但我还没有找到任何可以给我所需结果的东西。任何人都可以帮忙吗？

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>

标签： htmlcsstextalignment

解决方案

你期待这样吗：

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">

推荐阅读