Html 使用Vue.js的按钮位置

我已经有一段时间没有编码了，但我想知道如何将我的登录按钮定位在屏幕的底部中心，并在上面显示图像？谢谢

代码：

登录
使用Twitter登录
导出默认值{
方法：{
签名（）{
此.$store.dispatch（'signIn'））
}
}
}
h3{
字号：700；
}
钮扣{
背景色：#1dcaff；
边框：1px实心#1dcaff；
定位：绝对；
底部：0px；
}
div按钮：悬停{
背景色：#00aced；
边框：1px实心#00aced；
}

---

您的问题是classcol-md-6。在您的例子中，它的样式为：{width:50%}。您需要另一个适合您的情况的类来居中元素，请尝试：

显示器：flex； 证明内容：中心

或 保证金：0自动

---

但是您需要将col-md-6更改为col-md-12

谢谢。没有意识到这是bootstrap lmao。那是什么类呢？类col-md-12有样式：{width:100%}，默认情况下div有{width:100%}，所以在您的情况下，类根本不是必需的，所以只需简单的css/html就可以了？

<template>

    <div class="container-fluid">
      <img alt="Sportly logo" src="~@/assets/sportly.png">
        <div class="row">
            <div class="col-md-6">
                <h3>Login</h3>
                <button class="btn btn-primary"
                    @click="signIn">
                    <i class="fa fa-twitter"></i>
                    Sign In with Twitter
                </button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        signIn () {
            this.$store.dispatch('signIn')
        }
    }
}
</script>

<style scoped>
h3 {
    font-weight: 700;
}
button {
    background-color: #1dcaff;
    border: 1px solid  #1dcaff;
    positioning: absolute;
bottom: 0px;

}
div button:hover {
    background-color: #00aced;
    border: 1px solid  #00aced;
}
</style>