如何在此范围内对齐图像和文本

Question

我正在尝试以li和span对齐图像和文本。 我已经尝试了很多与此类似的问题和答案，但是都没有成功。 不幸的是，不能使用标签或表格。

谢谢

.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

在容器中使用display: flex;，然后align-items: center将其居中。 另外，要删除订单图片，请使用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

根据需要使用position:absolute到.red并与top/left一起定位...

还可以使用position:relative来包装DOM .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

如果您不喜欢使用flex，则可以使用组合absolute + transform: translate：D。所以在我的代码中，

position: absolute; top: 50%;

第一亲父母中有position: reative（li>span）的50％

transform: translateY(-50%);

本身占50％

.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>