Bootstrap 垂直居中标题 div 响应

Question

我正在尝试将 h5 在 div 中垂直居中，但我想以响应方式进行，因此那些将 parent 的高度设置为一定像素数的解决方案是'对我来说不是解决方案。

id 为 "channelName" 的 h5 是我试图在 parent div.

中垂直居中的内容

<div class="col-10 text-left channelTab"><h5 id="channelName">Name</h5></div>

#greyBox {
  background-color: grey;
}

#title {
  color: white;
}

.logo {
  max-height: 50px;
  max-width: 50px;
  border-radius: 50%;
  border: 3px solid white;
}

#channelName {
  vertical-align: middle;
  display: inline-block;
}

#channelRow {
  background-color: red;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-4"></div>
    <div id="greyBox" class="col-4 text-center">
      <div class="row">
        <div class="col-12 text-center">
          <h1 id="title">TITLE</h1>
          <div class="row" id="channelRow">
            <div class="col-2">
              <img src="image.png" class="logo"></div>
            <div class="col-10 text-left channelTab">
              <h5 id="channelName">Name</h5>
            </div>
          </div>

          <div class="col-6">

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如果可以通过对我的代码进行更多更改来更轻松地完成此操作，欢迎任何此类提示，因为我对此非常陌生并且仍在学习中。

Answer 1

将此 class 添加到 h5 d-flex align-items-center 的父级并删除 h5

的底部边距

这 class (d-flex) 将使 h5 的父级显示 flex 并且 align-items-center 将其垂直居中。

#greyBox {
  background-color: grey;
}

#title {
  color: white;
}

.logo {
  max-height: 50px;
  max-width: 50px;
  border-radius: 50%;
  border: 3px solid white;
}

#channelName {
 margin:0;
}

#channelRow {
  background-color: red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-4"></div>
    <div id="greyBox" class="col-4 text-center">
      <div class="row">
        <div class="col-12 text-center">
          <h1 id="title">TITLE</h1>
          <div class="row" id="channelRow">
            <div class="col-2">
              <img src="image.png" class="logo"></div>
            <div class="col-10 text-left d-flex align-items-center channelTab">
              <h5 id="channelName">Name</h5>
            </div>
          </div>

          <div class="col-6">

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Bootstrap 垂直居中标题 div 响应

Bootstrap vertically center heading div responsively

html

css

centering

bootstrap-4