如何填充範圍的底部文本以與複選框圖像對齊？

我正在嘗試一個很平凡的設計，但仍然找不到解決方案。如何填充範圍的底部文本以與複選框圖像對齊？

我想製作基於圖像的設計複選框。問題是，使用這種技術，我不能使用輸入的value屬性來顯示覆選框旁邊的文本。

所以，我試着在它旁邊放置一個<span>，但文本對齊到底部。我試圖通過各種屬性填充底部，但沒有成功。

我怎樣才能墊<span>圖像的文本垂直的複選框對齊「？我不想將這兩個元素都換成另一個<div>，這會將它們顯示爲表格。

這是我嘗試的一個片斷至今：

.chkchk { 
 
    display:none; 
 
} 
 
    
 
.chkchk + label { 
 
    background-image:url(http://i.imgur.com/RnoKxPS.png); 
 
    height: 22px; 
 
    width: 35px; 
 
    display:inline-block; 
 
    padding: 0 0 0 0px; 
 
    cursor:pointer; 
 
} 
 
.chkboxText { 
 
    padding-bottom:10px; 
 
    display:inline-block; 
 
}

<input class="chkchk" type="checkbox" name="thing" value="valuable" id="thing" /> 
 
<label for="thing"></label> 
 
<span class="chkboxText">dasdasdas</span>

來源

2017-08-17 Koby Douek

只需添加「垂直對齊：中間」，在.chkchk +標籤 – amyogiji

只需使用vertical-align: middle。希望能幫助到你。

.chkchk { 
 
    display: none; 
 
} 
 

 
.chkchk+label { 
 
    background-image: url(http://i.imgur.com/RnoKxPS.png); 
 
    height: 22px; 
 
    width: 35px; 
 
    display: inline-block; 
 
    padding: 0 0 0 0px; 
 
    cursor: pointer; 
 
    vertical-align: middle 
 
} 
 

 
.chkboxText { 
 
    padding-bottom: 10px; 
 
    display: inline-block; 
 
}

<input class="chkchk" type="checkbox" name="thing" value="valuable" id="thing" /> 
 
<label for="thing"></label> 
 
<span class="chkboxText">dasdasdas</span>

來源

2017-08-17 08:46:16 Duannx

這麼簡單，但我錯過了。謝謝。 –

歡迎您！但是如果我是你，我不會使用圖像。我將用html和css構建一個複選框。這不是太難 – Duannx

感謝您的提示，我會研究它。 –

添加的包裝，再加入display:flex;。我也重新排序的html相匹配的圖片

.wrapper{ 
 
display:flex; 
 
} 
 

 
.chkchk { 
 
    display: none; 
 
} 
 

 
.chkchk+label { 
 
    background-image: url(http://i.imgur.com/RnoKxPS.png); 
 
    height: 22px; 
 
    width: 35px; 
 
    display: inline-block; 
 
    padding: 0 0 0 0px; 
 
    cursor: pointer; 
 
} 
 

 
.chkboxText { 
 
    padding-bottom: 10px; 
 
}

<div class="wrapper"> 
 
    <span class="chkboxText">dasdasdas</span> 
 
    <input class="chkchk" type="checkbox" name="thing" value="valuable" id="thing" /> 
 
    <label for="thing"></label> 
 
</div>

來源

2017-08-17 08:46:08 Swellar

我投了，因爲它的工作，但我不能接受這個答案si我寫道，我不想添加一個包裝。謝謝！ –

添加vertical-align: middle;到label

.chkchk { 
 
    display:none; 
 
} 
 
    
 
.chkchk + label { 
 
    background-image:url(http://i.imgur.com/RnoKxPS.png); 
 
    height: 22px; 
 
    width: 35px; 
 
    display:inline-block; 
 
    padding: 0 0 0 0px; 
 
    cursor:pointer; 
 
    vertical-align: middle; 
 
} 
 
.chkboxText { 
 
    display:inline-block; 
 
}

<input class="chkchk" type="checkbox" name="thing" value="valuable" id="thing" /> 
 
<label for="thing"></label> 
 
<span class="chkboxText">dasdasdas</span>

來源

2017-08-17 08:46:11

這麼簡單，但我錯過了。謝謝。 –

也從'.chkboxText'中刪除'padding-bottom：10px'，現在不需要了。 –

我會的。感謝你的回答。 –

給position:relative和bottom到.chkboxText

.chkboxText { 
    position: relative; 
    bottom: 5px;//you can change this 
    display:inline-block; 
}

來源

2017-08-17 08:48:03

這是你需要什麼？

.chkchk { 
 
    display:none; 
 
} 
 
    
 
.chkchk + label { 
 
    background-image:url(http://i.imgur.com/RnoKxPS.png); 
 
    height: 22px; 
 
    width: 35px; 
 
    display:inline-block; 
 
    padding: 0 0 0 0px; 
 
    cursor:pointer; 
 
} 
 
.chkboxText { 
 
    /* padding-bottom:10px; */ 
 
    
 
} 
 
.fl-bx { 
 
    display:flex; 
 
    align-items:center; 
 
}

<div class="fl-bx"> 
 
<input class="chkchk" type="checkbox" name="thing" value="valuable" id="thing" /> 
 
<label for="thing"></label> 
 
<span class="chkboxText">dasdasdas</span> 
 
</div>

來源

2017-08-17 08:48:16

您可以使用vertical-align和padding

.chkchk { 
 
    display:none; 
 
} 
 
    
 
.chkchk + label { 
 
    background-image:url(http://i.imgur.com/RnoKxPS.png); 
 
    height: 22px; 
 
    width: 35px; 
 
    display:inline-block; 
 
    padding: 0 0 0 0px; 
 
    cursor:pointer; 
 
} 
 
.chkboxText { 
 
    display:inline-block; 
 
    vertical-align: middle; 
 
    padding-bottom: 1em; 
 
    
 
    position: relative; 
 
} 
 

 
.chkboxText:before { 
 
    content: ''; 
 
    background: red; 
 
    height: 1px; 
 
    width: 50px; 
 
    left: -50px; 
 
    top: 10px; 
 
    position: absolute; 
 
}

<input class="chkchk" type="checkbox" name="thing" value="valuable" id="thing" /> 
 
<label for="thing"></label> 
 
<span class="chkboxText">dasdasdas</span>

來源

2017-08-17 08:49:57 sol

感謝您採用這種方法。投了票。 –

如何填充範圍的底部文本以與複選框圖像對齊？

回答

相關問題