css - 标题居中并位于背景底部

Question

我是 React 新手，你能给我解释一下如何将一个 .herogroup(由 h1、p 和一个按钮组成)放在中间，距离背景底部 20px(属于 .Hero)吗？

<div>
 <div className="Hero">
   <div className="HeroGroup">
    <h1>ABC</h1>
    <p>ABC</p>
    <Link to="ABC">ABC</Link>
   </div>
 </div>

CSS

.Hero {
height: 1920px;
background-image: url('../images/abc.jpg');
background-size: cover;}

.HeroGroup{
max-width: 500px;
margin: 0 auto;
padding: 150px 50px;
text-align: center;}

Answer 1

我用过 css flex。这比使用绝对位置更方便实现您的情况。

.Hero {
    height: 1920px;
    background-image: url('../images/abc.jpg');
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.HeroGroup{
  max-width: 500px;
  margin: 0 auto;
  padding: 20px 0px;
  display: flex;
  /* flex-wrap: wrap; */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

<div>
 <div class="Hero">
   <div class="HeroGroup">
    <h1>ABC</h1>
    <p>ABC</p>
    <Link to="ABC">ABC</Link>
   </div>
 </div>