水平对齐 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/

Answer 2

在我看来，您有两种简单的方法可以做到这一点。

最简单和最简单的方法是创建一个 2x2 表。单元格的样式和大小可以使用 CSS 轻松操作，就像使用 .button 一样。

我看到的另一种方式是，您可以为 input-div col-sm-9 类添加 CSS，例如使用 text-align 进行垂直对齐。

查看http://www.w3schools.com/html/html_css.asp 了解有关 CSS 使用的更多信息。他们有很好的例子和教程。

希望对您有所帮助！

Answer 3

如果我清楚你想要什么，我建议为 .button 添加一些上边距，例如：margin-top: 35px 或 2.7em。