Question

我的css有点问题，我无法将图像与文本输入字段对齐。该网站正在http://jocolina.com/picemon/pokelocator.php

上线

我对文本输入和图像的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是我想要输入的图像，而locator是两个元素所在的div。

Answer 1

您可以将这两个元素都设置为vertical-align: bottom;。

#loginUTC{
  vertical-align: bottom;
}

#magniIMG{
  vertical-align: bottom;
}

Answer 2

您可以在图像处使用margin-bottom in negative来修复它

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

Answer 3

您可以使用浮点数将表单元素与您尝试在此处实现的图像对齐。您还需要为包含元素和输入添加一些宽度以对齐所有内容。试试 -

#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;
}

CSS将图像与输入对齐

3 个答案: