Question

使用此代码，文本不是垂直居中于div的中心。我不明白，因为我给了50％的位置。对于图像，我不能给出自定义高度，我想要什么？

在我的照片上，顶部的蓝线是导航栏，别介意。

<section class="bgimage-fooldal">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hero-text-fooldal">
        <h2 class="hero_title">Hello, world! Full width Hero-unit header</h2>
        <p class="hero_desc">This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique. Vevőidről, szállítóidról online információt nyerhetsz, így értesülhetsz arról.</p>
        <p><a href="#" class="btn btn-large hero_to_link">Árajánlat kérése »</a></p>
      </div>
    </div>
  </div>
</section>


/*************************** Hero css ****************************/
.bgimage-fooldal {
  width:100%;
  height:400px;
  background: url('../images/assets/teszt-1.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  background-attachment: fixed;
}
.hero-text-fooldal {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

Answer 1

你需要给出位置：相对于bgimage-fooldal类，所以它将根据你的div高度垂直居中

.bgimage-fooldal {
  width:100%;
  height:400px;
  background: url('https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  background-attachment: fixed;
  position:relative;
}
.hero-text-fooldal {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

<section class="bgimage-fooldal">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hero-text-fooldal">
        <h2 class="hero_title">Hello, world! Full width Hero-unit header</h2>
        <p class="hero_desc">This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique. Vevőidről, szállítóidról online információt nyerhetsz, így értesülhetsz arról.</p>
        <p><a href="#" class="btn btn-large hero_to_link">Árajánlat kérése »</a></p>
      </div>
    </div>
  </div>
</section>

Answer 2

您可以使用Flexbox来实现此目的。例如：

.hero-text-fooldal {
  width:100%;
  height:400px;
  background: url('../images/assets/teszt-1.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}

从.hero-text-fooldal

中删除样式

中心在英雄div中定位文本

2 个答案: