标题居中并位于背景底部

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

在您的 .HeroGroup class 中执行此操作

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

Answer 2

我用过cssflex。哪个比使用绝对位置更方便实现您的情况。

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

标题居中并位于背景底部

Caption centered and at the bottom of a background

css

reactjs

image

center

caption