Cannot center the div inside the v-carousel component.

div snaps to the left

<style scoped> .title { position: absolute; bottom: 50px; background-color: rgba(0, 0, 0, 0.5); color: white; font-size: 2em; padding: 30px; } </style> 
  <v-layout row wrap class="mt-3"> <v-flex xs12> <v-carousel> <v-carousel-item v-for="meetup in meetups" :key="meetup.id" :src="meetup.imageURL"> <div class="title">{{ meetup.title }}</div> </v-carousel-item> </v-carousel> </v-flex> <v-flex class="text-xs-center mt-2"> <p>Welcome to our meetups!</p> </v-flex> </v-layout>

    2 answers 2

     v-carousel { text-align: center; /* Родительскому задать выравнивание по центру */ } .title { max-width: 100%; background-color: rgba(0, 0, 0, 0.5); color: white; font-size: 2em; padding: 30px; display: inline-block; /* Для авто ширины блока и выравнивания */ vertical-align: top; /* что-бы блок не съезжал вниз при добавлении контента */ margin-top: 60px; /* Нужное расстояние */ }

      Thanks for the tip! In fact, to achieve the desired result was:

       <style scoped> .carousel { text-align: center; } .title { position: relative; bottom: 50px; background-color: rgba(0, 0, 0, 0.5); color: white; font-size: 2em; padding: 30px; display: inline-block; margin-top: 21em; } </style>