I am attempting to vertically center the h5 element within a div in a responsive manner, eliminating the use of fixed pixel heights. The h5 element, identified by its id as "channelName", is the element in question.
<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>If there are suggestions on improving this centering approach within my code, I am open to exploring such tips as I am relatively new to this and eager to learn.