html - 水平对齐 div 内的按钮

Question

.button {
    display:block;
    text-align:center;
    margin: auto;
    padding-bottom: inherit;
    vertical-align: top;
}

.input-div {
  vertical-align: top;
  }

<div class="form-group  field-plan">
				<label for="plan" class="col-sm-3 control-label">
					Current Plan
				</label>
				<div class="input-div col-sm-9">
					<p class="form-control-static control-field-plan">
					   20 alerts per day <br>	
                       0 out of 20 used
                      <span class="button">
                        <button class="change-button btn btn-success">
                          Change Plan
                        </button>
                      </span>
					</p>
				</div>
			</div>
			<div class="form-group payment_method field-payment_method">
				<label for="payment_method" class="col-sm-3 control-label">
					Payment
				</label>
				<div class="input-div col-sm-9">
					<p class="form-control-static control-field-payment_method">
                      Visa 4242 <br>
                      Next payment due: 2016-15-05
                      <span class="button">
                        <button class="update-card btn btn-success">
                          Update Card
                        </button>
                      </span>
					</p>
				</div>
			</div>

我有以下 HTML 代码:

<div class="form-group  field-plan">
    <label for="plan" class="col-sm-3 control-label">
        Current Plan
    </label>
    <div class="input-div col-sm-9">
        <p class="form-control-static control-field-plan">
            {{get_current_plan current_customer.plan}}
            <button class="change-button btn btn-success">
                Change Plan
            </button>

        </p>
    </div>
</div>
<div class="form-group payment_method field-payment_method">
    <label for="payment_method" class="col-sm-3 control-label">
        Payment
    </label>
    <div class="input-div col-sm-9">
        <p class="form-control-static control-field-payment_method">
            {{get_payment_method current_customer.payment_method}}
            <button class="update-card btn btn-success">
                Update Card
            </button>
        </p>
    </div>
</div>

我的应用程序在按钮前的两个 {{ ... }} 中显示文本。文本的数量各不相同，有时可能超过几行。

按钮的位置好像是由文本的最后一行决定的，所以按钮的位置变化很大，看起来不太好。

我对 css 知之甚少，但一直无法将按钮正确地放置在每个 div 中文本的第一行附近。

有人可以指导我使用 css 吗？

Answer 1

稍微改变了 HTML 的结构。顺便说一下，我在 Upwork 上为您的元素投标

HTML:

<div class="form-group  field-plan">
                <label for="plan" class="col-sm-3 control-label">
                    Current Plan
                </label>
                <div class="input-div col-sm-9">
                    <p class="form-control-static control-field-plan">
                       20 alerts per day <br>   
                       0 out of 20 used
                      <span class="button">
                        <button class="change-button btn btn-success">
                          Change Plan
                        </button>
                      </span>
                    </p>
                </div>
            </div>
            <div class="form-group payment_method field-payment_method">
                <label for="payment_method" class="col-sm-3 control-label">
                    Payment
                </label>
                <div class="input-div col-sm-9">
                    <p class="form-control-static control-field-payment_method">
                      Visa 4242 <br>
                      Next payment due: 2016-15-05
                      <span class="button">
                        <button class="update-card btn btn-success">
                          Update Card
                        </button>
                      </span>
                    </p>
                </div>
            </div>

CSS:

 .button {
        position:absolute;
        top:0;
        right:0;
    }
    .form-group{
      position:relative;
      width:300px;
    }
    .input-div {
      vertical-align: top;
      }

https://jsfiddle.net/fabian89/ndgx1drc/