This can be done using flex. Add it to your css:
.form-check-label.gp-label .m-0 {
display: flex;
align-items: center;
}
Solution 1 :
Solution 2 :
Flexbox is a more modern approach to this problem than floats. It’s more flexible (pardon the pun). I also changed the position of the checkbox.
.form-check {
display: flex !important; /* defined as block by Bootstrap */
flex-flow: row nowrap;
align-items: center;
}
.m-0 {
display: flex;
flex-flow: row nowrap;
align-items: center;
}
.gp-left {
margin: 0;
padding-right: 1px;
}
.gp-right {
flex: 1 1 auto;
}
.gp-right,
.gp-right-up,
.gp-right-down {
margin: 0;
padding: 0;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-check user-select-none">
<input
type="checkbox"
class="form-check-input"
id="gp"
/>
<label for="gp" class="form-check-label gp-label">
<div class="m-0">
<div class="gp-left">Lorem ipsum &</div>
<div class="gp-right">
<div class="gp-right-up">dolor</div>
<div class="gp-right-down">amet</div>
</div>
</div>
</label>
</div>Problem :
I have following label:
How do I make it so ‘Lorem ipsum’ reside exactly in the middle of two ‘dolor’ and ‘amet’?
– rough picture
I tried:
.gp-label {
vertical-align: middle;
width: 100%;
}
.gp-left {
margin: 0;
padding-right: 1px;
float: left;
display: table-cell;
vertical-align: middle;
}
.gp-right {
float: left;
}
.gp-right,
.gp-right-up,
.gp-right-down {
margin: 0;
padding: 0;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div className="form-check user-select-none">
<input
type="checkbox"
className="form-check-input"
id="gp"
/>
<label htmlFor="gp" className="form-check-label gp-label">
<div className="m-0">
<div className="gp-left">Lorem ipsum &</div>
<div className="gp-right">
<div className="gp-right-up">dolor</div>
<div className="gp-right-down">amet</div>
</div>
</div>
</label>
</div>But that results in:
and I cannot force the first div to be middle.
I use Bootstrap 4 checkbox/label. How can I achieve this?
Comments
Comment posted by TylerH
What are these
Comment posted by Mr Patience
It’s only description, some languages allow such comments. I will edit the question
Comment posted by Stack Snippets
Can you just use
Comment posted by TylerH
I’ve converted the code to a runnable Stack Snippet (and removed the meta commentary)