vue.jsのコンポーネント内でhtml要素にcssを適応してbuttonタグの位置を右にずらしたい

Question

Vue.jsのコンポーネントを使って開発しています。
そこで、Buttonタグの位置をずらしたいのですが、cssがうまく効きません。
要素名の後ろに!importantなどで優先度を工夫してもだめでした。
配色の変更などは反映します。
css含めフロントエンドの経験が浅いのですが、何かアドバイスを頂ければ幸いです。
よろしくお願いします。
今回の質問に関係の無いコードは分量が多いので、全て排除しています。
画像にある+ボタンの位置を上のセレクトタグの中央下に移動させられたら幸いです。
自分ではdivタグ内の要素の位置を変更の仕方で理解できてないところがあると思っています。

<template>
    <div class="col-sm-2 col-form-label">
        <h3>請選擇客戶名字</h3>
        <v-select id="table-sel1" v-model="tableSelected1" :on-change="fetchTags1()" :options="tables">
            <option id="table-opt1" v-for="table in tables" :key='table.id'>{{ table }}</option>
        </v-select>

        <h2>請選擇標籤</h2>
        <v-select id="tag-sel1" v-model="tagSelected1" :options="tags1">
            <option id="tag-opt1" v-for="tag in tags1" :key='tag.id'>{{ tag }}</option>
        </v-select>
        <button id="btn1">＋</button> 
    </div>
</template>    

<style scoped>
#btn1 {
  right: 50%;
}
</style>

Comments

[hatena19]

いくらなんでもコードを省略しすぎでしょう。
セレクトタグの中央下に移動させたいということなら、セレクトタグも含めたコードにしてください。HTMLとCSSの両方ともね。

[amaturePy]

失礼しました。セレクトタグを追加しました。
cssに関しては現状上記の物のみになります。

[amaturePy]

position: absolute;を加えることで解決いたしました。
cssの知識の無さを痛感しました。精進します。

Answer 1

親要素<div class="col-sm-2 col-form-label">に対しての中央配置ということなら、

div.col-sm-2.col-form-label {
    text-align: center;
}

position: absolute;での解決法はお勧めしません。まわりの要素に影響を与えますので、後々面倒なことになります。

Comments

[amaturePy]

ありがとうございます！
参考にさせて頂きます！！

Answer 2

position: absolute;を加えることで解決いたしました。