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的圖像

回答

相關問題