Question

我是React的初学者能否解释一下如何将.herogroup（由h1，p和一个按钮组成）放置在中间且距背景底部（属于.Hero）20px的地方？

The UUID String is: c8e1aceb-ee63-49f5-bd95-e6f3eebced20-d5c39 and it is 42 characters long.

CSS

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

Answer 1

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

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

Answer 2

我使用了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>

标题居中，位于背景底部

2 个答案: