将文本放在垂直按钮的中间

Question

我想将“即将发生”的文字放在此垂直按钮的中间。 这个按钮是一个自举按钮，带有一些自定义CSS，可以垂直对齐，增加它的高度并减小它的宽度。 到目前为止我尝试过的事情是：

1.text对齐：中心;

1. 填充

2. text-center（bootstrap 4 class）

但它们似乎都不起作用。

有什么想法吗？

这是我的HTML和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

请试试这个。我添加了代码，即

.vertical{ 
  left: -47px;
  position: absolute;
  margin: 0;  
  transform: rotate(-90deg);
}

＆＃13;

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;