Question

我试图将内容居于 v-list 的 v-list-tile-content 中。我尝试将text-xs-center，justify-center应用于 v-list 元素和 v-list-tile-content ，但它不起作用。另外，我尝试将div放入 v-list-tile-content 并应用前面提到的类。我发现v-list-tile-content元素具有 align-items：flex-start ，如果我删除它，它会自动应用这些类。

据我所知，align-items是用于垂直对齐的，对于水平对齐，正确的类是justify-items，对吗？

return reduce(a_set.intersection, sets[1:])
AttributeError: 'list' object has no attribute 'intersection'

Answer 1

由于我想使用Vuetify本机类，但是它们没有！important，而v-list的 align-items：start 覆盖了我的aling-center，所以我只添加了一个内联样式如下：

<v-list-tile-content
  :style="{
    'align-items':'center'
  }"
>
  {{ element.content | capitalizeFirstLetter }}
</v-list-tile-content>

这是我正在寻找的解决方案。希望对您有所帮助。

Answer 2

v-list-tile-content具有flex-direction: column

这意味着您必须设置align-items: center以使内容在其中水平居中。

Answer 3

如果您在Vuetify example list codepens之一上使用所有这些CSS规则，它将使列表项的文本中心对齐。（如果您没有second line，则不需要flex-direction: row部分。）

.v-list__tile__content{
    justify-content: center!important;
    flex-direction: row!important;
    text-align: center!important;
    align-items: center!important;
}

.v-list__tile__title, .v-list__tile__sub-title {
    text-align: center!important;
}

Answer 4

这应该适用于

v-list-item-component

按照justify content with vuetify flex上给出的vuetify版本> 2在v-list-item中将组件居中

const someString = "You received something from " + someName

Answer 5

我想，{{ element.content }}中的

<v-list-tile-content>只是文本。因此，只需添加class="text-center"即可。我在<v-list-item-title>遇到了非常相似的问题，而<v-list-item-title class="text-center">做到了。

Answer 6

只需将 "text-center" 类添加到 <v-list>。

应该是这样的： <v-list class = "text-center">

Vuetify-v-list-tile-content中的中心内容

6 个答案: