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

具有以下代码。CSS复选框+标签下带有ul/li的图像

<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; 
}

现在我得到了这一点。文字旁边是图片。

enter image description here [//复选框]我的名字

我要放置复选框与图片下的标签。图片应该位于复选框和标签的中间。

enter image description here

[//复选框]我的名字

其实CSS是很容易的，我实际上没有与CSS的问题，但我stucked。我通过stackoverflow搜索并尝试了很多CSS组合。

来源

2013-03-10 craphunter

只是包装您的输入和标签在另一个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-10 20:04:33 dfsq

但随后的图像不是复选框和标签上方居中。 – craphunter 2013-03-10 20:07:25

我添加了演示。 – dfsq 2013-03-10 20:15:30

你需要用你的输入和标签，然后对准到中心这样

的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-10 20:13:16 Sachin

让您的标签与复选框对齐..？ – Sachin 2013-03-10 20:36:31

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

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

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

这个jsfiddle具有我假设你试图实现的效果。

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

我还以为你整理这个问题但是任何未来的读者可能会发现这是很有帮助的

来源

2015-05-14 16:04:38 Dale

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

回答

相关问题