CSSはBootsFaces行内のコンポーネントを垂直に整列します

私はBootFaces JSF生成のログインフォームを持っていますが、入力フィールドを使ってスパンを真ん中に縦に並べることはできません。CSSはBootsFaces行内のコンポーネントを垂直に整列します

ここ

は、この特定のフォームのために生成される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>

そして、ここに属する2つのCSSファイルです

これは、ログインフォームが現在どのように見えるかですブート・フェイス：

bsf.css

高さは、あなたが高さと行の高さの両方を指定することにより、垂直方向に中央のテキストことができ、一貫性を維持することを想定すると

core.css

出典

2016-08-17 ChrisM

@BalusCはい、あなたは正しいです、HTMLとCSSのMCVEを提供するともっと役に立ちます。私は質問を修正し、CSSファイルへのリンクを張った。 – ChrisM

：

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

だけでユーザ名とパスワードのテキストフィールドにそのクラスを適用します。値は入力フィールドの高さを反映する必要があります。

出典

2016-08-17 05:45:09

ありがとう、これは動作します。値をハードコーディングせずにそれを行う方法があると私は期待していました。まもなく他の回答が来なければ、私はこれを答えとして受け入れるでしょう – ChrisM

おそらくバグは誤ったマークアップによって引き起こされます。BootsFaces 0.9.1以下が生成されます。進行状況を追跡するためにGitHubの問題を見てください（https://github.com/TheCoder4eu/BootsFaces-OSP/issues/475）。 –

解決があなたの問題を解決したことを聞いてうれしい！ハードコードされた値を使用せずに問題の解決策を見つけられたかどうかを確認するだけです。そうでない場合は、この回答を正しいとマークすることを忘れないでください。何人かのユーザーが未回答の質問にフィルタをかけるので、質問に対する回答を選んだことを覚えておけば、すでにソートされている問題を除外するのに役立ちます。乾杯！ :) –

CSSはBootsFaces行内のコンポーネントを垂直に整列します

答えて

関連する問題