Vue.js vuetify CSS3 无法将 span 元素与按钮中间垂直对齐答案

【问题标题】：Vue.js vuetify CSS3 cannot align vertically a span element with the middle of a buttonVue.js vuetify CSS3 无法将 span 元素与按钮中间垂直对齐
【发布时间】：2023-04-02 14:50:01
【问题描述】：

我目前尝试将垂直对齐 CSS 设置为中间，但它没有按我的意愿输出.. 感谢您的反馈

       <template>
        <!-- block to be tested -->
        <div data-v-5a5e3060="" class="layout row">
            <div data-v-5a5e3060="" class="flex xs12">
                <div data-v-5a5e3060="" class="text-xs-center">
                    <button data-v-5a5e3060="" type="button" class="btn btn--round">
                        <div class="btn__content">Clear</div>
                    </button>
                    <button data-v-5a5e3060="" type="submit" class="btn btn--round">
                        <div class="btn__content">LOGIN!<i data-v-5a5e3060="" aria-hidden="true" class="icon icon--right material-icons">lock_open</i></div>
                    </button>
                    <span data-v-5a5e3060="">Link to Forgot password?</span>
                </div>
            </div>
        </div>
    </template>



    <style scoped lang="scss">
    span {
      float: right;
      vertical-align: middle;
    }
    </style>

【问题讨论】：

如果您正在寻找 vuetify 解决方案，为什么要发布生成的 html 并使用 css？

标签： css vue.js vuetify.js

【解决方案1】：

只需在按钮和 span 的容器元素上使用 flex，例如：

.action-container {
  display: flex;
  align-items: center;
}

另外，如果使用 Vuetify，请查看 here，有内置的 flex 指令，因此您可以直接将它们应用到容器元素上，而无需编写任何额外的 CSS。例如，您可以使用 align-center 道具。

【讨论】：

非常感谢...我刚刚发现 vuetify（第一个项目）

【解决方案2】：

尝试将以下 CSS 应用于 span 标签：

span {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

如果不起作用，请将 position: relative 添加到容器 div 中

【讨论】：

感谢 Fabio 的反馈... 8bit 的回答似乎更能用 flex uage 来表示