1

具有以下代码。

<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组合。

4

3 回答 3

2

只需将您的输入和标签包装在另一个中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/

于 2013-03-10T20:04:33.083 回答
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;
}
于 2013-03-10T20:13:16.407 回答
0

不知道为什么我会在这里结束，但您不需要使用包装器来实现这种效果。

添加display:block到您的 li img 将导致后面的任何内容换行。position:relative; margin:0 auto;使您的图像居中。

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

这个 jsfiddle 具有我认为您试图达到的效果。

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

我还假设您对这个问题进行了排序，但是任何未来的读者可能会发现这很有帮助

于 2015-05-14T16:04:38.367 回答