Question

这是html文件：

div {
  height: 500px;
  padding: 0;
  margin: 0;
  text-align: center;
}

h1 {
  padding: inherit;
  margin: inherit;
}

.green {
  background-color: forestgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orange {
  background-color: orange;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="green">
  <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>

<div class="orange">
  <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>

<div class="green">
  <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>

<div class="orange">
  <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>

我想将所有文本设置为个别div高度的中心。首先表示h1的文本将出现在其下方，将出现段落标记的文本。从上部到h1标签的空间和从p标签的结尾到下部的空间都是相同的。

我是newbie.please帮助我。

Answer 1

这对你有用。希望它有所帮助！

＆＃13;

div {
  height: 500px;
  padding: 0;
  margin: 0;
  text-align: center;
}

h1 {
  padding: inherit;
  margin: inherit;
}

.green {
  background-color: forestgreen;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
}

.orange {
  background-color: orange;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
}

＆＃13;

<div class="green">
  <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>

<div class="orange">
  <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>

<div class="green">
  <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>

<div class="orange">
  <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>

＆＃13;

Answer 2

div {
  height: 500px;
  padding: 0;
  margin: 0;
  text-align: center;
}

h1 {
  padding: inherit;
  margin: inherit;
  position: relative;
  top: -60px;
  left: 250px;

}
p {
  padding: inherit;
  margin: inherit;
  position: relative;
  top: 60px;
  right: 480px;

}

.green {
  background-color: forestgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orange {
  background-color: orange;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="green">
  <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>

<div class="orange">
  <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>

<div class="green">
  <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>

<div class="orange">
  <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>

我想在css

2 个答案: