主页 / 问题 / 635864
Accepted
VaskM
Asked:2020-03-06 05:44:28 +0000 UTC2020-03-06 05:44:28 +0000 UTC

在另一个块中居中非固定尺寸块

  • 772

有必要通过 CSS 实现以下内容（加上悬停时背景图像变暗）：

图片

主要问题是如何将文本块（不是固定大小）居中放置在另一个带有背景图像的块的顶部？

css

2 个回答

  1. html, body {
  height: 100%;
  margin: 0;
}

body {
  text-align: center;
}

body::before {
  content: "";
  height: 100%;
}

section, body::before {
  display: inline-block;
  vertical-align: middle;
}
    <section>
  <h1>Animals</h1>
  <p>beautiful animals</p>
</section>

    • 1
  2. Best Answer

    1. 通过 Flexbox 解决

    .container-fluid {
  height: 400px;
  background-color: lightgreen;
  
  display: flex;
  /* Центрируем по вертикали */
  align-items: center;
  /* Центрируем по горизонтали */
  justify-content: center;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2 col-md-offset-5 text-center ">
      <div class="play-btn">
        <img src="http://elzol.lamusica.com/images/core/play.png" alt="Play">
        <p>Some Button</p>
      </div>
    </div>
  </div>
</div>

    2. 通过支持 IE 9 的伪元素解决

    .container-fluid {
  height: 400px;
  background-color: lightgreen;
  overflow: hidden;
  position: relative;
  text-align: center;
}

/* Обертка */
.container-fluid:before {
   content: '';
   height: 100%;
   display: inline-block !important;
   vertical-align: middle;
}

/* Блок, который нужно выровнять */
.row {
   display: inline-block;
   vertical-align: middle;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid">
  <div class="row">
    <div class="col-md-2 col-md-offset-5 text-center ">
      <div class="play-btn">
        <img src="http://elzol.lamusica.com/images/core/play.png" alt="Play">
        <p>Some Button</p>
      </div>
    </div>
  </div>
</div>

    3.通过绝对定位解决

    .container-fluid {
  height: 400px;
  background-color: lightgreen;
  overflow: hidden;
  position: relative;
}

.row{
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-2 col-md-offset-5 text-center ">
      <div class="play-btn">
        <img src="http://elzol.lamusica.com/images/core/play.png" alt="Play">
        <p>Some Button</p>
      </div>
    </div>
  </div>    
</div>

    4.通过行高解决

    .container-fluid {
  height: 400px;
  background-color: lightgreen;
  overflow: hidden;
  position: relative;
}

.row{
  line-height: 400px;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-2 col-md-offset-5 text-center ">
      <div class="play-btn">
        <img src="http://elzol.lamusica.com/images/core/play.png" alt="Play">
        <p>Some Button</p>
      </div>
    </div>
  </div>    
</div>

    • 1

相关问题