在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。