带有ul / li的图像下的CSS复选框标签

Question

拥有以下代码。

<div id="table">
    <li>
        <img id="img_friend_1" src="">
        <input type="checkbox" value="1" id="form_friend_1" name="form[friend][]" />
        <label for="form_friend_1" >My name</label>
    </li>
</div>

我的CSS

#table{
    display:  table;
    width:auto;
    display: inline-block;
}
label {
    display: inline-block;
}
input {
    margin:0;
    vertical-align: bottom;
    position: relative;
}

现在我明白了。图片旁边是文字。

[//复选框]我的名字

我想在图片下方放置带有标签的复选框。图片应位于复选框和标签的中间。

[//复选框]我的名字

实际上CSS很简单，我实际上没有CSS的问题，但我被困了。我通过stackoverflow搜索并尝试了很多css组合。

Answer 1

只需将您的输入和标签包装在另一个div：

中

<li>
    <img src="http://lorempixel.com/100/100">
    <div>
        <input type="checkbox" value="1" id="form_friend_1" name="form[friend][]" />
        <label for="form_friend_1" >My name</label>
    </div>
</li>

演示：http://jsfiddle.net/mRk3S/

Answer 2

您需要包装输入和标签，然后像这样对齐到中心

HTML

<div id="table">

    <li>
        <img id="img_friend_1" src="http://i.stack.imgur.com/JsxB5.gif" style="width:150px">
        <div class="wrap">
        <input type="checkbox" value="1" id="form_friend_1" name="form[friend][]" />
        <label for="form_friend_1" >My name</label>
        </div>
    </li>
</div>

这是您的.wrap班级

.wrap
{
    text-align: center;
}

Answer 3

我不知道为什么我到了这里，但你不需要使用包装来达到这个效果。

将display:block添加到您的li img将导致后续任何内容的换行符。 position:relative; margin:0 auto;以您的形象为中心。

将text-align:center添加到您的li中会使文字居中。

这个jsfiddle具有我认为你想要实现的效果。

https://jsfiddle.net/wxooa3tq/2/

我还假设您对此问题进行了排序，但未来任何读者都可能会发现这个有用