Question

我有一个BootFaces JSF生成的登录表单，但我似乎无法使用输入字段在中间垂直排列跨度。

这是登录表单目前的样子：

以下是为此特定表单生成的HTML：

<html>
    <head>
        <link rel="stylesheet" href="bsf.css"/>
        <link rel="stylesheet" href="core.css"/>
    </head>
    <body>
        <form id="loginForm" name="loginForm" method="post" action="" enctype="application/x-www-form-urlencoded">
           <input type="hidden" name="loginForm" value="loginForm" />
           <div id="loginForm:j_idt18" class="row">
              <div id="loginForm:j_idt19" class="col-md-4"><span class="pull-right">Username:</span></div>
              <div id="loginForm:j_idt21" class="col-md-4">
                 <div id="loginForm:username" class="form-group"><input id="input_loginForm:username" name="input_loginForm:username" type="text" class="form-control bf-no-message" placeholder="Username" /></div>
              </div>
              <div id="loginForm:j_idt22" class="message col-md-4 ">
                 <div id="loginForm:j_idt23"></div>
              </div>
           </div>
           <div data-toggle="tooltip" data-placement="auto" data-container="body" title="This password has fancy error messages." id="loginForm:j_idt24" class="row">
              <div id="loginForm:j_idt25" class="col-md-4"><span class="pull-right">Password:</span></div>
              <div id="loginForm:j_idt27" class="col-md-4">
                 <div id="loginForm:password" class="form-group"><input id="input_loginForm:password" name="input_loginForm:password" type="password" class="form-control bf-no-message" placeholder="Password" /></div>
              </div>
              <div id="loginForm:j_idt28" class="message col-md-4 ">
                 <div id="loginForm:j_idt29"></div>
              </div>
           </div>
           <div id="loginForm:j_idt30" class="row">
              <div id="loginForm:j_idt31" class="col-md-2 col-md-offset-4"><button type="submit" id="loginForm:j_idt32" name="loginForm:j_idt32" style="width:100%" class="btn btn-default" style="width:100%">Login</button></div>
              <div id="loginForm:j_idt33" class="col-md-2"><button type="submit" id="loginForm:j_idt34" name="loginForm:j_idt34" style="width:100%" class="btn btn-default" style="width:100%">Forgotten password?</button></div>
           </div>
           <input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:1" value="-5586558823054575095:3125033607536646469" autocomplete="off" />
        </form>
    </body>
</html>

以下是属于BootFaces的两个CSS文件：

bsf.css

core.css

Answer 1

假设高度保持一致，您可以通过指定高度和行高来垂直居中文本：

.vertical-center {
    height: 100px;
    line-height: 100px;
}

只需将该类应用于用户名和密码文本字段即可。值应反映输入字段的高度。

CSS垂直对齐BootsFaces行中的组件

1 个答案: