Question

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

我一直在尝试不同的属性，例如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>

Answer 1

我看到您的底部有一个div，在H1标签上方是否有一个起始div？

一种方法是这样做：

 h1{
    text-align:center;
 }

或为H1标记一个类名，这样您就只会影响那些具有该类名的人

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

<h1 class="page-title">

Answer 2

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

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

Answer 4

实际上，这很简单：

`<center><h1> Heading </

<center><h1> Heading </h1></center>
<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>

如何将此标题置于段落的中心？

4 个答案: