我有一个包含 div
内容和带有复选框的 span 的元素列表。我想将我的复选框跨度定位到 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>
?两者都在跨度内会给您正确的结果,对吗?你可以使用这样的东西:
.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>
关于html - 如何将 li 元素内的复选框定位到居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38459041/