css - 将文本对齐到 Bootstrap 上相邻按钮的中心

Question

我有以下 jsfiddle 模态

http://jsfiddle.net/WGGn6/1/

在登录按钮旁边我想要一个“忘记密码”链接。

问题是链接不在按钮的中心，看起来很糟糕

相关的html代码是:

  <div class="control-group">
            <div class="controls" style="position: relative;">
                    <div class="checkbox"><input name="user[remember_me]" type="hidden" value="0"><input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1"> <label for="user_remember_me">Remember me</label></div>
                <input class="control-group btn" name="commit" type="submit" value="Sign in"><a href="/users/password/new" data-remote="true" class="control-group" id="forgotpass" style="position: absolute; ">Forgot your password?</a>

这是从 erb 创建的:

<div class="control-group">
            <div class="controls" style="position: relative;">
                <% if devise_mapping.rememberable? -%>
                    <div class="checkbox"><%= f.check_box :remember_me %> <%= f.label :remember_me %></div>
                <% end -%>
                <%= f.submit "Sign in" , :class => "control-group btn"%><%- if devise_mapping.recoverable? && controller_name != 'passwords' %><%= link_to "Forgot your password?", new_user_password_path , :remote=>true, :style => "position: absolute; bottom: 0", :id=>"forgotpass" %>
                <% end -%>
                <%= ajaxloadericon %>
            </div>
        </div>

要让它位于中心必须做什么？

Answer 1

您可以使用填充来做到这一点，它可以移动文本。

​#forgotpass {
    padding: 5px 0 0 3px;
}​

会给你this