J'ai cette configuration ici, où j'ai quelques onglets et à droite se trouve une case à cocher.
Je voudrais que la case à cocher soit alignée verticalement au centre avec les étiquettes des onglets.
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
J'ai vu cette réponse mais en ajoutant la classe vcenter et en la définissant comme donnée
XXX
ne fait pas l'affaire pour moi et n'assigne pas non plus ces styles au div avec la colonne elle-même. J'ai aussi essayé de me débrouiller avec display: table et table-cell et vertical-align: middle , mais cela ne fonctionne pas non plus.
Flexbox n'est malheureusement pas une option.
3 Réponses :
J'ai ajouté quelques CSS de base. Est-ce ce que vous avez demandé?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<br>
<div class="container">
<ul class="nav nav-tabs" role="tablist">
<li id="tab_1" role="presentation" class="active"><a id="lnk_1" href="#">Tab1</a></li>
<li id="tab_2" role="presentation" class=""><a id="lnk_2" href="#">Tab2</a></li>
<li id="tab_3" role="presentation" class=""><a id="lnk_3" href="#">Tab3</a></li>
</ul>
<div id="checkbox">
<input id="cb_D" type="checkbox" onclick="/* do things */">
<label for="cb_D">CB</label>
</div>
</div>
.nav {
float: left;
}
#checkbox {
float: right;
padding: 10px 15px;
}
J'ai fait flotter la navigation vers la gauche et la case à cocher vers la droite pour les faire apparaître les unes à côté des autres. J'ai également recherché combien de remplissage Bootstrap s'appliquait aux onglets et utilisé la même chose sur mon checkbox-div.
Pas de soucis! N'oubliez jamais que Bootstrap lui-même n'est qu'une grande collection de règles CSS et de fonctions JavaScript, donc théoriquement vous n'avez jamais besoin de Bootstrap et parfois cela pourrait même être plus facile sans lui.
Ici, vous pouvez appliquer des css spécifiques avec line-height et vertical-align: middle;
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<br/>
<br/>
<div class="container">
<div class="row">
<div class="col-sm-6 col-xs-8">
<ul class="nav nav-tabs" role="tablist">
<li id="tab_1" role="presentation" class="active"><a id="lnk_1" href="#">Tab1</a></li>
<li id="tab_2" role="presentation" class=""><a id="lnk_2" href="#)">Tab2</a></li>
<li id="tab_3" role="presentation" class=""><a id="lnk_3" href="#">Tab3</a></li>
</ul>
</div>
<div class="col-sm-6 col-xs-4">
<span class="customvcent pull-right"><input id="cb_D" type="checkbox" onclick="/* do things */"><label for="cb_D">CB</label></span>
</div>
</div>
</div>
</body>
</html>
.customvcent,.customvcent *{
line-height:42px;
vertical-align:middle;
}
.customvcent input[type=checkbox]{
margin:0px;
}
.customvcent label{
margin-bottom:0px;
}
Vous pouvez simplement ajouter du style dans la classe de ligne existante ou si vous ne voulez pas déranger cela, ajoutez une nouvelle classe dans l'élément comme ci-dessous
.middle-row {
display: flex;
align-items: center;
}
css
<div class="middle-row row">
Sa dernière voie indique explicitement que "Flexbox n'est malheureusement pas une option".
comment ça devrait venir?
la case à cocher doit être alignée avec le texte dans les onglets et sur le côté droit de l'écran.