时间戳

首页 > 解决方案 > 在 Vuetify 滑块中将文本与不同方向对齐

vue.js - 在 Vuetify 滑块中将文本与不同方向对齐

问题描述

我有以下滑块

Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
  <v-carousel
      
        cycle
        height="600"
        hide-delimiter-background
        show-arrows
        next-icon
        prev-icon
    >
    
    <v-carousel-item
      :src=`https://picsum.photos/seed/picsum/536/354`
    
    >

    <v-row align-end>
      <h1 class="white-text">Lorem, ipsum dolor.</h1>
      <p class="white-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quo iusto velit autem, pariatur impedit neque, sed a, rem architecto aut aliquid aspernatur magni quibusdam natus ducimus fugiat. Et, veniam.</p>
      <v-btn color="yellow black-text">Hi</v-btn>
    </v-row>

    </v-carousel-item>
  </v-carousel>
  </v-app>
</div>

例如，我想将第一张幻灯片的文本对齐图像的底部中心，我听说 Vuetify 使用 flexbox，但我不确定它是如何工作的，我什至不理解文档中的示例，所以我需要一些帮助。我最想知道的是在哪里放置对齐或对齐，我真的不明白。

标签： vue.jsvuetify.js

解决方案

尝试将以下类添加d-flex flex-column justify-end align-center fill-height到v-row组件中：

Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-carousel cycle height="600" hide-delimiter-background show-arrows next-icon prev-icon>

      <v-carousel-item :src=`https://picsum.photos/seed/picsum/536/354`>

        <v-row class="d-flex flex-column justify-end align-center fill-height">
          <h1 class="white-text">Lorem, ipsum dolor.</h1>
          <p class="white-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quo iusto velit autem, pariatur impedit neque, sed a, rem architecto aut aliquid aspernatur magni quibusdam natus ducimus fugiat. Et, veniam.</p>
          <v-btn color="yellow black-text">Hi</v-btn>
        </v-row>

      </v-carousel-item>
    </v-carousel>
  </v-app>
</div>

推荐阅读