滑动textarea问题

Question

请用滑动textarea帮助我。如果我添加错误字段的图标，我的textarea向左。一些截图：

还有一些代码：

<div class="signup">
 <center>
    <h1>Форма регистрации</h1>
    <p>Для получения информации и участия в акциях информация должна быть правдивой</p>


    <form name="registerform">
        <p>
            <input type="text" placeholder="Ваше имя" id="user_login" class="input" size="20" /> <span id="user_login_result"></span>
        </p>

        <p>
            <input type="email" placeholder="Ваш Email" id="user_email" class="input" size="20" /> <span id="user_email_result"></span>
        </p>
   </form>

 </center>
</div>

css：

#user_login.input, #user_email.input {
    border: 1px solid #ccc;
    width: 50%;
    border-radius: 0;
}

图标显示时的

代码：

<p>
 <input type="text" placeholder="Ваше имя" id="user_login" class="input" size="20" /> <span id="user_login_result"><img src="un-available.png" /></span>
</p>

Answer 1

<center>标签已过时 - 您应该使用margin-left和margin right

这是一个jsfiddle

.signup {
  width: 100%;
}
#user_login.input,
#user_email.input {
  border: 1px solid #ccc;
  width: 50%;
  border-radius: 0;
}
h1,
.text {
  text-align: center;
}
form {
  margin-left: 24%;
  margin-right: 24%, text-align: center;
}

<div class="signup">

  <h1>Форма регистрации</h1>
  <p class="text">Для получения информации и участия в акциях информация должна быть правдивой</p>


  <form name="registerform">
    <p>
      <input type="text" placeholder="Ваше имя" id="user_login" class="input" size="20" /> <span id="user_login_result"><img src="http://www.iberia.com/ibcomv3/rbrand/img/content/ico-x.gif" width="10px" height="10px"></span>
    </p>

    <p>
      <input type="email" placeholder="Ваш Email" id="user_email" class="input" size="20" /> <span id="user_email_result"></span>
    </p>
  </form>


</div>