Place text in the middle of a vertical button - html

Question

I Want to place the 'Upcoming' text in the middle of this vertical button.
this button is a bootstrap button with some custom CSS to align it vertically and to increase it's height and decrease it's width.
Things which I have tried so far are:
1.text-align:center;
padding
text-center(bootstrap 4 class)
But none of them seems to work.
Any idea?
this is my HTML and CSS
.list-group {
width: 100%;
}
.list-group-item-action {
color: black;
background: white;
}
.list-group-item-action:hover {
background: #3d6277;
color: white;
}
.container-fluid {
width: 100%;
}
.search {
width: 300px;
}
.img-fluid {
margin: 0 auto;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 5px;
margin: 2px;
font-size: 12px;
}
h2{
color: white;
position: absolute;
top: 190px;
left: 50px;
right:80px;
width: 100%;
}
.btn {
width:20px;
padding:10px;
height: 283px;
position: absolute;
z-index: 600085000;
}
h6{
font-size:22px;
text-align: center;
}
.btn btn-primary btn-sm{
background-color: #8064A2 !important;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
.font-size{
font-size:10px;
font-weight:50px;
padding-left: 30px;
text-transform: capitalize;
}
.vertical{
text-align: horizontal;
-webkit-transform: rotate(-90deg); /* Chrome, Safari 3.1+ */
-moz-transform: rotate(-90deg); /* Firefox 3.5-15 */
-ms-transform: rotate(-90deg); /* IE 9 */
-o-transform: rotate(-90deg); /* Opera 10.50-12.00 */
transform: rotate(-90deg);
}
<div class="row">
<button type="button" class="btn btn-danger btn-sm"><h6 class="vertical">Upcoming</h6></button>
<div class="list-group col-sm-2" *ngFor="let movie of upcomingMovies|search:movieName;">
<button type="button" (click)="detail(movie.id)" class="list-group-item list-group-item-action" >
<div class="image">
<img src={{movie.img}} class="img-fluid" id="first-row" width="250px" height="250px" />
<h2><span class='spacer'>{{movie.name}}</span> </h2>
<span class="font-size">{{movie.genres}}</span>
</div>
</button>
</div>
</div>

Answer 1

Please try this.I have added code i.e
.vertical{
left: -47px;
position: absolute;
margin: 0;
transform: rotate(-90deg);
}
.list-group {
width: 100%;
}
.list-group-item-action {
color: black;
background: white;
}
.list-group-item-action:hover {
background: #3d6277;
color: white;
}
.container-fluid {
width: 100%;
}
.search {
width: 300px;
}
.img-fluid {
margin: 0 auto;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 5px;
margin: 2px;
font-size: 12px;
}
h2{
color: white;
position: absolute;
top: 190px;
left: 50px;
right:80px;
width: 100%;
}
.btn {
width:20px;
padding:10px;
height: 283px;
position: absolute;
z-index: 600085000;
}
h6{
font-size:22px;
text-align: center;
}
.btn btn-primary btn-sm{
background-color: #8064A2 !important;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
.font-size{
font-size:10px;
font-weight:50px;
padding-left: 30px;
text-transform: capitalize;
}
.vertical{
left: -47px;
position: absolute;
margin: 0;
-webkit-transform: rotate(-90deg); /* Chrome, Safari 3.1+ */
-moz-transform: rotate(-90deg); /* Firefox 3.5-15 */
-ms-transform: rotate(-90deg); /* IE 9 */
-o-transform: rotate(-90deg); /* Opera 10.50-12.00 */
transform: rotate(-90deg);
}
<div class="row">
<button type="button" class="btn btn-danger btn-sm"><h6 class="vertical">Upcoming</h6></button>
<div class="list-group col-sm-2" *ngFor="let movie of upcomingMovies|search:movieName;">
<button type="button" (click)="detail(movie.id)" class="list-group-item list-group-item-action" >
<div class="image">
<img src={{movie.img}} class="img-fluid" id="first-row" width="250px" height="250px" />
<h2><span class='spacer'>{{movie.name}}</span> </h2>
<span class="font-size">{{movie.genres}}</span>
</div>
</button>
</div>
</div>