CSS вертикально выравнивает компоненты в пределах строки BootsFaces

У меня есть форма входа в систему, созданная JSF для BootFaces, но, похоже, я не могу получить, чтобы диапазон был вертикально посередине с полями ввода.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>

И вот два CSS файлы, принадлежащие BootFaces:

bsf.css

core.css

источник

2016-08-17 ChrisM

@BalusC, да, вы правы, и предоставление MCVE HTML и CSS было бы более полезным. Я изменил вопрос и поместил ссылки на файлы 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

ответ

Смежные вопросы