html - CSS 将图像与输入对齐

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 是我要与输入进行 algin 的图像，而 locator 是两个元素所在的 div。

Answer 1

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

#loginUTC{
  vertical-align: bottom;
}

#magniIMG{
  vertical-align: bottom;
}