我正在嘗試對齊一些文本、輸入字段和大約 25x25 像素的圖像我得到的是 div 頂部的文本和圖像，以及稍微下方的輸入。我如何對齊它們，使它們彼此垂直水平。這是我到目前為止所擁有的：div.block {overflow:hidden; border:1px solid #000 }div.block label {width:150px; display:block; float:left; text-align:left; vertical-align:middle; }div.block.input {margin-left:4px; float:left; vertical-align:middle; }https://jsfiddle.net/a3cmfpzL/謝謝
4 回答
忽然笑
TA貢獻1806條經驗 獲得超5個贊
這是水平的：
.block{
display:flex;
}
label{
border:1px solid red;
}
img{
height:25px;
width:25px;
}
<div class='block'>
<label>Test Label</label>
<input type='text' value='1234567890'/>
<img src='http://placekitten.com/301/301'/>
</div>
如果您正在尋找垂直方向，那么：
*{
border:0;
padding:0;
}
.block{
display:flex;
flex-direction:column;
}
label{
border:1px solid red;
width:100px;
}
img{
height:25px;
width:25px;
}
<div class='block'>
<label>Test Label</label>
<input type='text' value='1234567890'/>
<img src='http://placekitten.com/301/301'/>
</div>
蝴蝶刀刀
TA貢獻1801條經驗 獲得超8個贊
我強烈建議你使用flexbox。
一開始可能會有點混亂，但是一旦掌握了竅門，您就會喜歡它。在這里您可以找到完美的使用指南。
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
像這樣的東西（只是我腦子里寫的，所以未經測試）嘗試先刪除你的課程。
你的CSS
.flex {
display: flex;
flex-direction: column;
justify-content: space-between; // only use this if you don't justify-self the elements
}
.border {
border:1px solid #000;
}
img {
width: 25px;
height: 25px;
justify-self: top; // if you don't use flex-direction on .flex
}
input {
justify-self: top; // if you don't use flex-direction on .flex
}
您的 HTML
<div style="flex border">
<img src='image.png'/>
<label>Test Label</label>
<input type='text' value='1234567890'/>
</div>
RISEBY
TA貢獻1856條經驗 獲得超5個贊
幾個問題
這
div.block.input沒有選擇任何內容，因此所有這些樣式都沒有被使用您將標簽設置為塊級元素，因此它不會響應該
vertical-align屬性。
和<input>是<img>內聯元素，因此它們將共享它們所在的同一行框，它們的垂直對齊方式將由屬性設置vertical-align。
屬性的默認值vertical-align是基線：
將框的基線與父框的基線對齊。如果該框沒有基線，請將下邊距邊緣與父級的基線對齊。
在本例中，我們有一個<img>沒有基線的圖像，因此它將根據其底部邊距進行對齊，在我們的示例中，img 沒有邊距，因此它基本上是底部邊緣。
然而<input>有一個基線，所以它的基線將與它旁邊的img的下邊緣對齊。
演示版
div.block {
overflow: hidden;
border: 1px solid #000
}
div.block label {
width: 150px;
display: block;
float: left;
text-align: left;
vertical-align: middle;
}
div.block.input {
margin-left: 4px;
float: left;
vertical-align: middle;
}
div {
position: relative;
}
div:after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(red, red) 0 24.5px/ 100% 1px no-repeat
}
<p>red line is the baseline</p>
<div class='block'>
<label>Test Label</label>
<input type='text' value='1234567890' />
<img src='https://i.picsum.photos/id/527/25/25.jpg' />
</div>
解決方案
我清理了一些代碼并刪除了不必要的樣式。
浮動不是必需的
如果您要對標簽應用寬度，請
display:inline-block;改用
1）垂直對齊：中間；
* {
padding: 0;
margin: 0;
}
div.block {
overflow: hidden;
border: 1px solid #000
}
label {
width: 150px;
display: inline-block;
vertical-align: middle;
background: brown;
}
input {
vertical-align: middle;
border: 0;
background: red;
}
img {
vertical-align: middle;
}
<div class='block'>
<label>Test Label</label>
<input type='text' value='1234567890' />
<img src='https://i.picsum.photos/id/527/25/25.jpg' />
</div>
項目將相對于最高項目（即 img）的中間對齊。
2）如果你想讓元素共享相同的高度
知道了<img>最高的元素和它的高度，我們可以簡單地將相同的高度應用于其他元素，我們仍然需要vertical-align:top根據元素的頂部邊緣而不是基線來對齊元素
* {
padding: 0;
margin: 0;
/* because we defined a height on the element,
we need to ensure that any extra space should be
calculated within that height */
box-sizing: border-box;
}
div.block {
overflow: hidden;
border: 1px solid #000;
font-size:0;
}
label {
display: inline-block;
width: 150px;
height: 25px;
font-size:16px;
vertical-align: top;
line-height:25px;
background:brown;
}
input {
height: 25px;
vertical-align: top;
border:0;
background:red;
}
<div class='block'>
<label>Test Label</label>
<input type='text' value='1234567890' />
<img src='https://i.picsum.photos/id/527/25/25.jpg' />
</div>
3) 彈性盒
這是最簡單的，我不會介紹，因為它已在其他答案中介紹過。
- 4 回答
- 0 關注
- 253 瀏覽
添加回答
舉報
0/150
提交
取消