JSFIDDLE

Question

我有一个响应式文本框，其标签在焦点上移动，如果文本框有输入。我试图在文本框的右侧添加一个图像，该文本框与文本框输入对齐。但是图像向下移动了。

HTML：

<div style="margin-top: 20px">
  <input class="responsiveTextBox" type="text" id="clientName" required="required" />
  <img src="https://s31.postimg.org/6bym9bjnf/reset.png" class="resetImage">
  <label class="responsiveLabel" id="lblClientName" for="clientName">Client Name</label>
  <div class="bar"></div>
</div>

CSS：

.responsiveTextBox{
  outline: none;
  z-index: 1;
  position: relative;
  background: none;
  width: 100%;
  height: 60px;
  border: 0;
  color: black;
  font-size: 16px;
  font-weight: 400;
}

.responsiveLabel {
  position: absolute;
  top: 0;
  left: 0;
  color: #757575;
  font-size: 20px;
  font-weight: 300;
  line-height: 60px;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}

.responsiveTextBox:focus ~ label {
  color: #9d9d9d;
 -webkit-transform: translate(-12%, -50%) scale(0.75);
  transform: translate(-12%, -50%) scale(0.75);
 }

.responsiveTextBox.hasValue ~ label {
  color: #9d9d9d;
 -webkit-transform: translate(-12%, -50%) scale(0.75);
  transform: translate(-12%, -50%) scale(0.75);
 }

.responsiveTextBox:valid ~label {
   color: #9d9d9d;
   -webkit-transform: translate(-12%, -50%) scale(0.75);
   transform: translate(-12%, -50%) scale(0.75);
 }

.bar{
   position: absolute;
   left: 0;
   /*bottom: 0;*/
   background: #757575;
   width: 100%;
   height: 1px;
  }

.resetImage{
   float: right;
   vertical-align: middle;
 }

JSFIDDLE

有任何建议如何解决此问题？

Answer 1

您的输入宽度是100％，您需要减少它并从img中删除float属性以进行vertical-align：middle to works

.responsiveTextBox{
  width: 95%;
}
.resetImage {
  vertical-align: middle;
}

Fiddle

在响应式文本框中对齐垂直图像

JSFIDDLE

1 个答案: