Is there a way to center text along the vertical axis of a div in HTML? I've already tried using text-align:center;
, but that only works for the horizontal axis. Is there an equivalent method for the Y axis?
I want to apply this to all divs with the class .subcol
and the div with the id #top
.
body {
margin: 15px;
}
.subcol {
background: teal;
color: white;
border-radius: 7px;
text-align: center;
margin: 0 5px 5px 0;
height: 50px;
}
#top {
background: cyan;
width: 100%;
height: 150px;
text-align: center;
font-style: bold;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div id="top">Hello World Page</div>
<div class="row">
<div class="col-lg-6 col-sm-12">
<div class="subcol">
Hello World 1
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="subcol">
Hello World 2
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="subcol">
Hello World 3
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="subcol">
Hello World 4
</div>
</div>
</div>