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与输入对齐图像

回答

相关问题