CSS與輸入對齊圖像

我有一個小問題，我的CSS，我無法對齊圖像與文本輸入字段。該網站是活在http://jocolina.com/picemon/pokelocator.php CSS與輸入對齊圖像

的CSS我對文字輸入和圖像：

#loginUTC{ 
    width:30%; 
    height: 60px; 
    font-family: Verdana; 
    font-size: 30px; 
    text-align:center; 
    font-weight: bold; 

    /*margin: 0 auto;*/ 
    border-color: #336688; 
} 

#magniIMG{ 
    display: inline; 
    height: 60px; 
    cursor: pointer; 
} 

#locator{ 
    margin: 0 auto; 
    text-align:center; 
    height:60px; 
}

哪裏loginUTC是文字輸入，magniIMG是我要與輸入到褐藻膠的形象，定位器是兩個元素都在的div。

來源

2014-12-21 Jo Colina

您可以將這兩個元素設置爲vertical-align: bottom;。

#loginUTC{ 
    vertical-align: bottom; 
} 

#magniIMG{ 
    vertical-align: bottom; 
}

來源

2014-12-21 22:14:13 AlexMeng

您可以使用浮點數將表單元素與圖像對齊，就像您在此嘗試實現的一樣。您還需要爲包含元素和輸入添加一些寬度以對齊所有內容。嘗試 -

#locator { 
margin: 0 auto; 
text-align: center; 
height: 60px; 
width: 545px; 
} 

#loginUTC { 
height: 60px; 
font-family: Verdana; 
font-size: 30px; 
text-align: center; 
font-weight: bold; 
/* margin: 0 auto; */ 
border-color: #336688; 
float: left; 
} 

#magniIMG { 
/* display: inline; */ 
height: 60px; 
cursor: pointer; 
float: left; 
}

來源

2014-12-21 22:17:33

這將打破雖然在流體佈局。 –

會發生什麼，如果它走到左邊 –

您可以在圖像中負極採用下邊距，將修復它

#magniIMG { 
    display: inline; 
    cursor: pointer; 
    height: 60px; 
    margin-bottom: -18px; 
}

來源

2014-12-21 22:29:54

是的，我也發現-18是解決方案，但它非常依賴於屏幕，並可能無法在移動 –

@JoColina否它不依賴於屏幕。它取決於代碼和像素將正常工作，直到你有相同的高度設置。您可以通過調整瀏覽器大小來查看:) –

CSS與輸入對齊圖像

回答

相關問題