entityMap|blocks|key|4r4ml|text|因为我想使用Vuetify本机类，但是它们没有!important和|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2ud4e|对齐项目:开始|afk05|覆盖了我的aling-center，我只是添加了一个内联样式，如下所示：|fr15a|​|f1ntu|{{+element.content+%7C+capitalizeFirstLetter+}}|code-block|syntax|javascript|fpafi|5quc9|这就是我一直在寻找的解决方案。希望能有所帮助。^0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|Q|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|R|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|S|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|T|9|@]|A|@]|B|$]]|$2|I|4|J|6|K|8|U|9|@]|A|@]|B|$L|M]]|$2|N|4|H|6|7|8|V|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|W|9|@]|A|@]|B|$]]]]

As I wanted to use the Vuetify native classes but they had not the !important and the align-items: start of the v-list was overwriting my aling-center, I just added an inline style as follows:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;v-list-tile-content
 :style="{
 'align-items':'center'
 }"
&gt;
 {{ element.content | capitalizeFirstLetter }}
&lt;/v-list-tile-content&gt;</code></pre>
</div>
</div>


This was the solution that I was searching for. Hope it helps.

entityMap|blocks|key|a9p1h|text|如果您在某个Vuetify上使用所有这些CSS规则|type|unstyled|depth|inlineStyleRanges|entityRanges|data|bv3sg|示例列表代码|9oii8|，它会将列表项文本居中对齐。(如果您没有|cqn7a|第二行|o2j5|，您不需要|5r2dq|部分。)|dla5h|.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;
}|code-block|syntax|javascript^0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|R|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|S|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|T|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|U|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|V|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|W|9|@]|A|@]|B|$]]|$2|M|4|N|6|O|8|X|9|@]|A|@]|B|$P|Q]]]]

If you use all of these CSS rules on one of the Vuetify <a href="https://vuetifyjs.com/en/components/lists#avatar-with-title-and-action" rel="nofollow noreferrer">example list codepens</a>, it aligns the list item text center. (If you don't have a <a href="https://vuetifyjs.com/en/components/lists#icon-with-2-lines-and-action" rel="nofollow noreferrer">second line</a>, you don't need the <code>flex-direction: row</code> part.)

<pre><code>.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;
}
</code></pre>

entityMap|blocks|key|1scop|text|有|type|unstyled|depth|inlineStyleRanges|entityRanges|data|e2ijm|这意味着您必须设置|d8fap|若要在其中水平居中显示内容，请执行以下操作。^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|H|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|I|9|@]|A|@]|B|$]]]]

<code>v-list-tile-content</code> has <code>flex-direction: column</code>

This means that you have to set <code>align-items: center</code> to horizontally center the content within.

entityMap|blocks|key|ftpqg|text|这应该适用于|type|unstyled|depth|inlineStyleRanges|entityRanges|data|bm1mi|v-list-item-component|3mhrd|ajank|要使vuetify+versions+>2中的v-list-item中的组件居中，请执行下列操作|977gq|使用vuetify+flex调整内容|d47gq|{{+element.content+}}|code-block|syntax|javascript|3crbl|​^0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|Q|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|R|9|@]|A|@]|B|$]]|$2|E|4|-4|6|7|8|S|9|@]|A|@]|B|$]]|$2|F|4|G|6|7|8|T|9|@]|A|@]|B|$]]|$2|H|4|I|6|7|8|U|9|@]|A|@]|B|$]]|$2|J|4|K|6|L|8|V|9|@]|A|@]|B|$M|N]]|$2|O|4|P|6|7|8|W|9|@]|A|@]|B|$]]]]

This should work for 

<blockquote>
 v-list-item-component
</blockquote>

to center a component in a v-list-item in vuetify versions > 2 as given on <a href="https://vuetifyjs.com/en/styles/flex" rel="nofollow noreferrer">justify content with vuetify flex</a>

<pre><code>&lt;v-list-tile-content
class="d-flex justify-center"
&gt;
 {{ element.content }}
</code></pre>

entityMap|blocks|key|9f2mp|text|里面只有一段文字，我想。因此，简单地添加|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8ut74|应该行得通。我曾经遇到过非常类似的问题，并做到了这一点。^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|F|9|@]|A|@]|B|$]]]]

<code>{{ element.content }}</code> inside <code>&lt;v-list-tile-content&gt;</code> that's just a text, I suppose. Therefore, simply adding <code>class=&quot;text-center&quot;</code> should work. I've had very similar issue with <code>&lt;v-list-item-title&gt;</code> and <code>&lt;v-list-item-title class=&quot;text-center&quot;&gt;</code> did the trick.

entityMap|blocks|key|ak6ne|text|只需添加一个类|type|unstyled|depth|inlineStyleRanges|entityRanges|data|42qfh|到。|9tv91|应该是这样的：^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|H|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|I|9|@]|A|@]|B|$]]]]

just add a class of <code>&quot;text-center&quot;</code> to the <code>&lt;v-list&gt;</code>.
it should be like this :
<code>&lt;v-list class = &quot;text-center&quot;&gt;</code>

I am trying to center the content inside a v-list-tile-content of a v-list without success.
I've tried to apply text-xs-center, justify-center to the v-list element and the v-list-tile-content and it does not work.
Also I've tried to put a div inside the v-list-tile-content and apply the previously mentioned classes.
I've found that the v-list-tile-content element has a align-items: flex-start and if I delete that it automatically apply the classes.

As far as I know align-items it's for vertical alignment and for horizontal alignment the proper class is justify-items, am I right?

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;v-list class="table pa-0"&gt;
 &lt;v-list-tile
 v-for="(element, index) in elements"
 :key="`pricing_table_element_${index}`"
 :class="{'dark-background': index % 2 === 0}"
 avatar
 &gt;
 &lt;v-list-tile-avatar&gt;
 &lt;fa-icon
 icon="check-circle"
 color="#00BB9B"
 /&gt;
 &lt;/v-list-tile-avatar&gt;

 &lt;v-list-tile-content&gt;
 {{ element.content }}
 &lt;/v-list-tile-content&gt;

 &lt;v-list-tile-action&gt;
 &lt;v-tooltip right&gt;
 &lt;fa-icon
 slot="activator"
 icon="info-circle"
 color="#f68e28"
 /&gt;
 &lt;span&gt;{{ element.tooltip }}&lt;/span&gt;
 &lt;/v-tooltip&gt;
 &lt;/v-list-tile-action&gt;
 &lt;/v-list-tile&gt;
&lt;/v-list&gt;</code></pre>
</div>
</div>

Vuetify - Center content in v-list-tile-content

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

 我正在尝试将内容放在 v-list-tile-content 的 V形列表 没有成功。我已经尝试将text-xs-center，justify center应用于 V形列表 元素和 v-list-tile-content 但它不起作用。此外，我还尝试将div放入 v-list-tile-content 并应用前面提到的类。我发现v-list-tile-content元素有一个 对齐项目: fle

问v-list-tile-content中的Vuetify Center内容
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问v-list-tile-content中的Vuetify Center内容EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问v-list-tile-content中的Vuetify Center内容
EN