이미지를 이미지에 세로로 정렬합니다.

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에서 플로트 속성을 제거해야합니다 작품

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

Fiddle