如何在此 li 和 span 中对齐图像和文本

Question

I'm trying to align an image and text in an li and span. I've tried a lot of questions and answers similar to this, but no success. Using a label or table is not an option unfortunately.

Thanks

 .checkbox, .radio { width: 19px; height: 20px; padding: 0px; background: url(../../Content/Images/TriStateCheckboxes.jpg); display: block; clear: left; float: left; } .green { background-color: green; background: url(../../Content/Images/PermissionChecked.jpg); position: absolute; top: 11px; left: -20px; } .red { background-color: red; position: absolute; top: 11px; left: -20px; } li { cursor: pointer; }

 <ul class="nav nav-list" id="MM0" style="border: currentColor; border-image: none;"> <li> <span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#MMID_0"> <span class="checkbox MMTree-checkbox styled red" id="sp_MM_0"> <input name="MM_0" class="MMTree-checkbox styled red" id="MM_0" style="display: none;" type="checkbox" value="false" iid="FkComponentId= ComponentId=2 Granted=-1 PermissionId=0|"> </span> <span> LookupTables </span> <span class="caret"></span> </span> <ul class="nav nav-list collapse show" id="MMID_0" style="padding-left: 60px;"> <li> <span class="accordion-heading" data-toggle="collapse" data-target="#MMID_00"> <span class="checkbox subtree-checkbox styled red" id="sp_SM_0_0"> <input name="SM_0_0" class="subtree-checkbox styled red" id="SM_0_0" style="display: none;" type="checkbox" value="false"> </span> <span> Countries </span> </span> </li> </ul>

Answer 1

Use display: flex; in your container, and then align-items: center to center them. Also, to remove the order image use list-style-type: none;

 .checkbox, .radio { width: 19px; height: 20px; padding: 0px; background: url(../../Content/Images/TriStateCheckboxes.jpg); display: block; clear: left; float: left; } .red { background-color: red; } ul { list-style-type: none; } li { cursor: pointer; } .accordion-heading { display: flex; align-items: center; }

 <ul class="nav nav-list" id="MM00"> <li> <span class="accordion-heading" aria-expanded="false" data-toggle="collapse" data-target="#MMID_0 "> <span class="checkbox MMTree-checkbox styled red" id="sp_MM_0 "> <input name="MM_0" class="MMTree-checkbox styled red" id="MM_0" style="display: none; " type="checkbox" value="false" > </span> <span> LookupTables </span> <span class="caret"></span> </span> </li> </ul>

Answer 2

Use position:absolute to .red and position with top/left as you want...

Also use position:relative to wrap DOM in your case .accordion-heading

 .checkbox, .radio { width: 19px; height: 20px; padding: 0px; background: url(../../Content/Images/TriStateCheckboxes.jpg); display: block; clear: left; float: left; } .accordion-heading { position: relative; } .red { background-color: red; position: absolute; left: -28px; } li { cursor: pointer; list-style-type: none; }

 <ul class="nav nav-list" id="MM00" style="b order-image; none;"> <li> <span class="accordion-heading" aria-expanded="false " data-toggle="collapse " data-target="#MMID_0 "> <span class="checkbox MMTree-checkbox styled red " id="sp_MM_0 "> <input name="MM_0 " class="MMTree-checkbox styled red " id="MM_0 " style="display: none; " type="checkbox " value="false " ></span> <span> LookupTables </span> <span class="caret "></span> </span> </li> </ul>

Answer 3

If you don't like to use flex , you can use combo absolute + transform: translate :D. So in my code,

position: absolute; top: 50%;

mean 50% of 1st parent with position: reative ( li>span )

transform: translateY(-50%);

mean 50% of itself

 .checkbox, .radio { width: 19px; height: 20px; padding: 0px; background: url(../../Content/Images/TriStateCheckboxes.jpg); display: block; } .red { background-color: red; } li{ list-style: none; cursor: pointer; } li>span{ display: inline-block; position: relative; cursor: pointer; } li>span span{ position: absolute; top: 50%; transform: translateY(-50%); } li>span span:last-child{ left: unset; right: 0px; } li>span span:nth-child(2){ right: unset; left: 20px; }

 <ul class="nav nav-list" id="MM0" style="border: currentColor; border-image: none;"> <li> <span class="accordion-heading" aria-expanded="true" data-toggle="collapse" data-target="#MMID_0"> <span class="checkbox MMTree-checkbox styled red" id="sp_MM_0"> <input name="MM_0" class="MMTree-checkbox styled red" id="MM_0" style="display: none;" type="checkbox" value="false" iid="FkComponentId= ComponentId=2 Granted=-1 PermissionId=0|"> </span> <span> LookupTables </span> <span class="caret"></span> </span> <br/> <ul class="nav nav-list collapse show" id="MMID_0" style="padding-left: 60px;"> <li> <span class="accordion-heading" data-toggle="collapse" data-target="#MMID_00"> <span class="checkbox subtree-checkbox styled red" id="sp_SM_0_0"> <input name="SM_0_0" class="subtree-checkbox styled red" id="SM_0_0" style="display: none;" type="checkbox" value="false"> </span> <span> Countries </span> </span> </li> <li> <span class="accordion-heading" data-toggle="collapse" data-target="#MMID_00"> <span class="checkbox subtree-checkbox styled red" id="sp_SM_0_0"> <input name="SM_0_0" class="subtree-checkbox styled red" id="SM_0_0" style="display: none;" type="checkbox" value="false"> </span> <span> Age </span> </span> </li> </ul>