如何让Vuetify左右列内容在Y轴上相互对齐？

我懂你遇到的困扰——明明给v-row设置了align="start"，左边的文本已经顶对齐了，但右边的v-img却还是垂直居中，导致两边Y轴位置不一致。这其实是因为Vuetify的v-img组件和v-col默认有一些样式会干扰对齐效果，下面给你几个靠谱的解决方案：

方法1：给v-img添加align-self-start类 #

直接给v-img加上Vuetify内置的align-self-start类，强制它在父容器中顶对齐：

<v-col xs="12" sm="12" md="12" lg="12" xl="12" class="pl-0">
  <v-row align="start">
    <v-col>
      <p class="text-left">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </v-col>
    <v-col>
      <v-img 
        class="one-click-image align-self-start" 
        :src="require('../assets/profile.svg')" 
        contain 
        height="200" 
        width="500" 
      ></v-img>
    </v-col>
  </v-row>
</v-col>

方法2：给右侧v-col添加align-self-start类 #

如果希望整个右列的内容都顶对齐，可以把align-self-start加到v-col上，这样列内的所有元素都会跟着对齐：

<v-col xs="12" sm="12" md="12" lg="12" xl="12" class="pl-0">
  <v-row align="start">
    <v-col>
      <p class="text-left">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </v-col>
    <v-col class="align-self-start">
      <v-img 
        class="one-click-image" 
        :src="require('../assets/profile.svg')" 
        contain 
        height="200" 
        width="500" 
      ></v-img>
    </v-col>
  </v-row>
</v-col>

方法3：将v-img改为块级元素 #

如果前两种方法没生效，可能是v-img默认的flex布局在搞鬼，给它加d-block类改成块级元素，就能消除内部的垂直居中：

<v-img 
  class="one-click-image d-block" 
  :src="require('../assets/profile.svg')" 
  contain 
  height="200" 
  width="500" 
></v-img>

这些方法都是利用Vuetify的内置工具类，不用写额外的CSS，应该能快速解决你的对齐问题。

内容的提问来源于stack exchange，提问作者Joe B.