自舉3水平雙線標籤

當標籤帶兩條線時，如何垂直對齊標籤和輸入？自舉3水平雙線標籤

這裏是我的代碼：

<form class="form-horizontal"> 
    <div class="form-group"> 
    <label class="control-label col-sm-3" for="passwd_confirm">Confirmation du mot de passe:</label> 
    <div class="col-sm-9"> 
     <input type="password" class="form-control" id="passwd_confirm" maxlength="32"> 
    </div> 
    </div> 
<form>

默認顯示是輸入和標籤的第一行具有相同的基準，但我要對齊的輸入與標籤的垂直中心。

我該怎麼做？

謝謝。

來源

2017-05-24 Arie S.

這是自舉3？ –

如果您使用的是bootstrap3，您可以向父級添加一個類，使其成爲flex行，然後使用align-items: center垂直居中。您可能還希望通過刪除該填充或將其作爲填充或邊距添加到右列/輸入，具體取決於您的佈局的其餘部分，以匹配.control-label元素的默認padding-top: 7px值。

.form-group.valign { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
@media (min-width: 768px) { 
 
    .valign input { 
 
    margin-top: 7px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<form class="form-horizontal"> 
 
    <div class="form-group valign"> 
 
    <label class="control-label col-sm-3" for="passwd_confirm">Confirmation du mot<br> de passe:</label> 
 
    <div class="col-sm-9"> 
 
     <input type="password" class="form-control" id="passwd_confirm" maxlength="32"> 
 
    </div> 
 
    </div> 
 
<form>

來源

2017-05-24 17:56:04

謝謝@邁克爾！ Flexbox完美運作。我只是用這個替換媒體查詢： media（max-width：768px）{ .form-group.valign { \t display：block; }} 在小屏幕上獲取默認行爲。 –

@ArieS。真棒，歡迎你:) –

自舉3水平雙線標籤

回答

相關問題