image - Vuetify v-img 在 v-col 内对齐
问题描述
我认为这很容易,但我无法实现向右对齐的图像......请参阅此代码笔:
https://codepen.io/slayerbleast/pen/KKVGgKO
编码:
<v-content>
<v-container>
<v-row
align="right"
align-content="right"
class="text-right"
>
<v-col class="text-right">
<v-img
max-height="200px"
max-width="200px"
src="https://picsum.photos/200/300"
align="right"
></v-img>
</v-col>
</v-row>
</v-container>
</v-content>
如何将图像与 v-col 内的右侧对齐
解决方案
您可以简单地使用.ml-auto
vuetify 中的实用程序类。无需编写自己的 CSS。
这是我所做的更改。
<div id="app">
<v-app>
<v-content>
<v-container>
<v-row>
<v-col>
<v-img
max-height="200px"
max-width="200px"
src="https://picsum.photos/200/300"
class="ml-auto"
></v-img>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</div>
它似乎正在工作,这是你笔的工作克隆
推荐阅读
- django - 网站和 API 的不同语言设置
- amazon-web-services - 模板的 Resources 块中未解决的资源依赖关系 [RestAPIDeployment]
- xslt - 将 html Inside 标签 (span class=) 转换为 XML 标签
- javascript - 我需要打开 HTMLCollection 或 Nodelist 来创建节点数组吗?
- visual-studio - 可能是什么 tfs 2015 Builds 停止工作
- android - 从 Android WebView 的 URL 打开外部应用程序
- reactjs - 是否有 React Transition Group 的 SwitchTransition 组件的工作示例?
- php - 在 Travis CI 中启用 PHP-GMP
- flutter - Flutter 中的 VoidCallback 是如何工作的?
- java - java从字符串中提取值