Tengo el siguiente código con Vue y Foundation, pero quiero ayuda para centrar un span verticalmente en todo el div:
new Vue({
el: "#app",
data: {
},
methods: {
}
})
.badge {
padding: 0.2rem 0.3rem;
border-radius: 3px;
color: white;
font-style: normal;
font-weight: normal;
font-size: 11px;
line-height: 11px;
text-align: center;
}
.badge-cancelled {
background: #474747;
}
.card {
background-color: rgba(196, 196, 196, 0.5);
width: 200px;
height: 225px;
}
.row-start-at {
margin-bottom: 0.6rem;
}
.card-section {
padding: 0.4em !important;
font-size: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css">
<div id="app">
<div class="card">
<div class="card-section">
<span class="badge badge-cancelled">Cancelled</span>
<div class="row row-start-at">
<div class="columns small-16">
<h5 class="schedule-start-at">4:40 AM</h5>
</div>
<div class="row">
<div class="columns small-24">
<h4>Titulo</h4>
</div>
</div>
<div class="row">
<div class="columns small-24">
<span class="schedule-mins">45 min</span>
</div>
</div><br/>
<div class="row">
<div class="columns small-24">
+Add URL
</div>
</div>
</div>
</div>
</div>
</div>
Dentro del div tengo información de horas y texto, lo que quiero hacer es que la etiqueta 'Cancelled' pase al centro de todo el contenedor, y que lo de atras se vea con opacidad como la siguiente imagen:
Comparto JSFiddle para que me puedan ayudar por favor: https://jsfiddle.net/bardalesj/sLfpc0ax/1/