Vuetify中如何实现v-card-title内v-img与v-text上下完美居中对齐

解决方案 #

你可以直接使用Vuetify内置的flex工具类实现需求，无需多余嵌套，代码如下：

<v-card-title class="aca-login-title d-flex flex-column align-center justify-center">
  <v-img max-width="2.5em" class="login-avatar mb-2" src="imgUrl"/>
  <v-text style="color:#565656">Some Title Here</v-text>
</v-card-title>

代码说明 #

• d-flex：将v-card-title设置为flex布局容器
• flex-column：指定容器内元素纵向排列，自动实现图片在上、文本在下的结构
• align-center：让所有子元素在水平方向居中对齐，同时适配图片和文本两种元素的居中需求
• justify-center：如果你的v-card-title设置了固定高度，该属性会让整组内容在容器内部垂直居中
• mb-2：给图片添加底部外边距，拉开和下方文本的间距，可根据视觉需求调整为mb-1/mb-3等值

如果你使用的是Vuetify 1.x版本，可使用v-layout实现，代码如下：

<v-card-title class="aca-login-title">
  <v-layout column align-center>
    <v-img max-width="2.5em" class="login-avatar mb-2" src="imgUrl"/>
    <v-text style="color:#565656">Some Title Here</v-text>
  </v-layout>
</v-card-title>

原写法失效是因为text-xs-center是文本对齐类，仅对行内元素生效，对块级的图片适配不稳定，使用flex布局的方案兼容性更高，也符合Vuetify的布局规范。

内容的提问来源于stack exchange，提问作者mikeym