Everything is centered. It is necessary that the "Email" and "Password" are from the beginning of the text field. Help me please.

enter image description here

Closed due to the fact that off-topic participants Alexey Shimansky , user207618, HamSter , aleksandr barakin , rjhdby 15 Oct '16 at 10:38 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • “Questions asking for help with debugging (“ why does this code not work? ”) Should include the desired behavior, a specific problem or error, and a minimum code for playing it right in the question . Questions without an explicit description of the problem are useless for other visitors. See How to create minimal, self-sufficient and reproducible example . " - Alexey Shimansky, Community Spirit, HamSter, aleksandr barakin, rjhdby
If the question can be reformulated according to the rules set out in the certificate , edit it .

  • one
    it would be better to markup html laid out and css ........ and so you can fence anything, float left or text-align: left or else the devil knows that, depending on the markup - Alexey Shimansky
  • one
    Easy: i.stack.imgur.com/srPtf.png - user207618
  • @Other, SUPER !!!! - HamSter
  • one
    @ElenaSemenchenko, but what about jo! :) It is a pity only for anyway, but I will not do the quality, all of a sudden, this is required, but I was not paid for the work? - user207618
  • @Other, I didn’t even think about this solution! =)))) - HamSter

1 answer 1

For these "Email" and "Password" it can be <label> or <span> or just <div> (exactly to them) to ask:

 text-align: left;

For example:

 form { text-align: center; } input { display: block; text-align: center; } label { display: block; text-align: left; } /* доп. стили */ *{ box-sizing: border-box; } form { max-width: 300px; width: 100%; background: #66bcf7; border-top: 5px solid #2aa4f7; padding: 2rem 3rem; } input { width: 100%; height: 3rem; line-height: 3rem; border: 3px solid #fff; background: transparent; color: #fff; padding: 0 1rem; margin-bottom: 2rem; } label { margin-bottom: 10px; color: #fff; } 
 <form> <div class="row-form"> <label>Электронная почта</label> <input type="text" name="text" id="text" value="email@com.ru"> </div> <div class="row-form"> <label>Пароль</label> <input type="text" name="text" id="passs" value="****"> </div> </form>

From the beginning of the input form (if I correctly understand what you want at all):

 form { text-align: center; } input { display: inline-block; vertical-align: middle; width: 49%; text-align: center; } label { display: inline-block; vertical-align: middle; width: 49%; text-align: left; } /* доп. стили */ *{ box-sizing: border-box; } form { max-width: 500px; width: 100%; background: #66bcf7; border-top: 5px solid #2aa4f7; padding: 2rem 3rem; } input { height: 3rem; line-height: 3rem; border: 3px solid #fff; background: transparent; color: #fff; padding: 0 1rem; } label { color: #fff; line-height: 3rem; } .row-form { margin-bottom: 2rem; } 
 <form> <div class="row-form"> <label>Электронная почта</label> <input type="text" name="text" id="text" value="email@com.ru"> </div> <div class="row-form"> <label>Пароль</label> <input type="text" name="text" id="passs" value="****"> </div> </form>

  • For span and label then you still need to set display: block . - YuS
  • The text will be to the left of the beginning of the screen, and you need to from the beginning of the input form. - Arthur
  • @Artur, 1. You need to add your html / css to solve such problems. 2. At least somehow would have drawn what you want (The text will be to the left of the beginning of the screen, but it is necessary that from the beginning of the input form). - HamSter
  • You need to put a monument - for disinterested help :) - user207618
  • @ElenaSemenchenko therefore it is necessary to close the vaguely asked questions with a request for editing, and especially with a screen, and not to answer - Alexey Shimansky