mardi 21 février 2023

Align ASP checkbox CSS label styling

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;
}

Picture showing text in red that I would like to move down

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:

Flex styling




Aucun commentaire:

Enregistrer un commentaire