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

Question

我目前尝试将垂直对齐 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>

Answer 1

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

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

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

Answer 2

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

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

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

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

Vue.js vuetify CSS3 cannot align vertically a span element with the middle of a button

css

vue.js

vuetify.js