Platzieren Sie den Text in der Mitte einer vertikalen Schaltfläche.

Question

I Sie möchten den Text "Upcoming" in der Mitte dieser vertikalen Schaltfläche platzieren. Diese Schaltfläche ist eine Bootstrap-Schaltfläche mit einigen benutzerdefinierten CSS, um sie vertikal auszurichten und ihre Höhe zu erhöhen und ihre Breite zu verringern. Dinge, die ich bisher versucht habe, sind:

1.text-align: Zentrum;

2. padding

3. text-Zentrum (Bootstrap Klasse 4)

Aber keiner von ihnen scheint zu funktionieren.

Irgendeine Idee?

das ist mein HTML und 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 { 
 

 
\t 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%; \t 
 
} 
 
.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

Bitte versuchen this.I hinzugefügt Code d.h

.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%; \t 
 
} 
 
.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>