如何将li元素内的复选框定位到中心？答案

【问题标题】：How to position the check box inside li element to center?如何将li元素内的复选框定位到中心？
【发布时间】：2016-11-22 09:05:17
【问题描述】：

我有一个包含div 内容和带有复选框的跨度的项目列表。我想将我的复选框范围定位到 li 元素的中心。

<li class="e-list e-state-default e-list-check">
    <div class="cont-bg">
       content here varies
     </div>
 <span >
 <input class="e-lv-check e-checkbox e-js e-input" type="checkbox"/>
  </span>
</li>

内容是动态加载的，因此其高度和宽度会发生变化。我无法为定位设置填充。也尝试使用垂直对齐进行定位。没有任何效果。

.e-list.e-state-default {
  background-color: #fff;
  border-color: #c8c8c8;
}
.e-list {
  border-bottom: 1px solid #c8c8c8;
  font-size: 12px;
}
.cont-bg {
  font-size: 17px;
  height: 100px;
  padding-left: 5px;
  padding-top: 10px;
  width: 80%;
  display: inline-block;
}
.e-list .e-lv-checkdiv {
  float: right;
}
.e-list {
  border-bottom: 1px solid #c8c8c8;
  font-size: 12px;
}
.e-list {
  line-height: normal;
  padding: 0 15px;
  cursor: pointer;
  vertical-align: middle;
}

<ul>

  <li class="e-list e-state-default e-list-check">
    <div class="cont-bg">
      <div class="brooke">
      </div>
      <div class="listrightdiv">
        <span class="templatetext">Brooke</span>  <span class="designationstyle">HR Assistant</span>
        <div class="aboutstyle">
          Brooke provides administrative support to the HR office. Brooke provides administrative support to the HR office. Brooke provides administrative support to the HR office.
        </div>
      </div>
    </div>
    <span><input class="e-lv-check e-checkbox e-js e-input" type="checkbox" tabindex="" name="null" value="true" /> </span>
  </li>
  <li class="e-list e-state-default e-list-check">
    <div class="cont-bg">
      <div class="brooke">
      </div>
      <div class="listrightdiv">
        <span class="templatetext">Brooke</span>  <span class="designationstyle">HR Assistant</span>
        <div class="aboutstyle">
          Brooke provides administrative support to the HR office. Brooke provides administrative support to the HR office. Brooke provides administrative support to the HR office.
        </div>
      </div>
    </div>
    <span><input class="e-lv-check e-checkbox e-js e-input" type="checkbox" tabindex="" name="null" value="true" /> </span>
  </li>
</ul>

谁能帮帮我？

【问题讨论】：

你为什么混合<div>和<span>？两者都在范围内会给你正确的结果吗？
@PraveenKumar 我可能对这一天的工作感到有点困惑。

标签： html css position alignment center

【解决方案1】：

为什么要混合<div> 和<span>？两者都在范围内会给你正确的结果，对吗？你可以使用这样的东西：

.e-list,
.e-list span {vertical-align: middle; text-align: center;}

<li class="e-list e-state-default e-list-check">
  <span class="cont-bg">
    content here varies
  </span>
  <span>
    <input class="e-lv-check e-checkbox e-js e-input" type="checkbox"/> This is centered.
  </span>
</li>

如果由于某种原因，您无法将 <div> 更改为 <span>，请使用：

.e-list {vertical-align: middle; text-align: center;}
.e-list div,
.e-list span {vertical-align: middle; text-align: center; display: inline-block;}

<li class="e-list e-state-default e-list-check">
  <div class="cont-bg">
    content here varies
  </div>
  <span>
    <input class="e-lv-check e-checkbox e-js e-input" type="checkbox"/> This is centered.
  </span>
</li>

【讨论】：