I have a label that looks like this:
Is there a way to position 'Lorem ipsum' perfectly in the center between 'dolor' and 'amet'?
- reference image
This is what I've attempted:
.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>However, the result is not as expected:
and I am unable to align the first div to be centered.
I am using Bootstrap 4's checkbox/label system. Any suggestions on how I can achieve this?