Align ASP checkbox CSS label styling

Question

I am using an ASP checkbox within a website I have built. The problem I'm having is that the text is aligning with the top of the checkbox because I've applied:

display: inline !important;

This is much better than if I don't add this, because otherwise it sits at the top of the space and not anywhere near the checkbox! However it looks like it is sitting a little high. Is there an easy way to make the text sit in the middle next to the checkbox? I've included a screenshot to show what I mean.

I'm not very experienced with CSS but I've tried adding margins and padding and neither have worked.

My code looks like this:

C#

<div class="col-sm-3 form-group">
   <asp:CheckBox ID="CheckBox1" runat="server" Text="Text is a little high" class="form-check-input" CssClass="chkbx_inline_top"/>
</div>

CSS

.chkbx_inline_top label {
    color: red !important;
    display: inline !important;
}

With the suggestion below and doing some more googling, I have now also tried this without luck:

https://stackoverflow.com/a/39939769/1860687

.chkbx_inline_top{
    display: flex !important;
    align-items: center !important;
}

.chkbx_inline_top label {
    align-self: flex-start !important;
}

But it hasn't worked for me:

Try to all this style .chkbx_inline_top{display:flex;align-items:center;} — Jaswinder Kaur, Feb 21 '23 at 12:37
@JaswinderKaur that makes the text sit underneath the checkbox :( — hlh3406, Feb 21 '23 at 12:41

score 0 · Answer 1 · answered Feb 21 '23 at 13:38

Check styling of your input element in browser, there is a default styling for input elements something like this:

input[type="radio"], input[type="checkbox"] {
    margin: 4px 0 0;
    margin-top: 1px \9;
    line-height: normal;
}

Then you can fix it with a styling in css to set margin of input element to 0, something like this:

.chkbx_inline_top input[type=checkbox]{
    margin:0;
}

score 0 · Accepted Answer · answered Feb 22 '23 at 15:17

I fixed this in the end by a comnbination of the two suggestions I recieved. Posting it here in case it helps someone else!

.chkbx_inline_top {
    display: flex !important;
    align-items: center !important;
}

.chkbx_inline_top label {
    align-self: flex-start !important;
    margin-bottom: -5px !important;
    margin-left: 2px !important;

}

Align ASP checkbox CSS label styling

2 Answers2