Центрирование div не работает должным образом с шрифтом awesome - PullRequest
Новая
       8

Центрирование div не работает должным образом с шрифтом awesome

0 голосов
/ 03 июля 2018

Проблема: JSFiddle

Я хочу центрировать всю форму и создал класс с именем «center» с заданными атрибутами. Но после добавления центрального класса в форму в JSFiddle, иконки fontawesome остаются слева и не двигаются. Они должны быть расположены «внутри» элемента ввода слева от текста. Поэтому, чтобы освободить место для иконки, я также добавил отступ слева.

Может кто-нибудь дать мне решение этой проблемы, так как обе иконки остаются слева из-за центрирования? Я действительно не могу понять, почему это не работает, и это уже заняло так много времени: /

Спасибо. 

.center{
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }
    
    .box {
        position: relative;
        margin-bottom: 20px;
    }
    
    .box .fa {
        position: absolute;
        top: 10px;
        left: 5px;
    }
    
    .box input[type="text"],
    .box input[type="password"] {
        border: 0px;
        border-bottom: 1px solid #ccc;
        text-decoration: none;
        width: 180px;
        padding: 10px;
        padding-left: 25px;
    }
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="center">
<form action="/login" method="POST" class="form">
  <div class="box">
    <i class="fa fa-user" aria-hidden="true"></i>
    <input required name="username" type="text" placeholder="user">
  </div>
  <div class="box">
    <i class="fa fa-key" aria-hidden="true"></i>
    <input required name="password" type="password" placeholder="pass">
  </div>
  <div class="box">
    <input name="submit" type="submit" value="Login">
  </div>
</form>
</div>

Ответы [ 2 ]

0 голосов
/ 03 июля 2018

это происходит потому, что 

.box .fa {
position: absolute;
top: 10px;
left: 5px;

}

Вы можете использовать начальную позицию для него.

0 голосов
/ 03 июля 2018

Элементы .box имеют значение div с и, следовательно, имеют ширину 100% от родительского элемента.

Простым решением было бы дать им фиксированную ширину, равную ширине ваших input с, и отцентрировать их, используя левый и правый поля auto: 

.center{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.box {
    position: relative;
    margin: 0 auto 20px;
    width: 180px;
}

.box .fa {
    position: absolute;
    top: 10px;
    left: 5px;
}

.box input[type="text"],
.box input[type="password"] {
    border: 0px;
    border-bottom: 1px solid #ccc;
    text-decoration: none;
    width: 180px;
    padding: 10px;
    padding-left: 25px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="center">
<form action="/login" method="POST" class="form">
  <div class="box">
    <i class="fa fa-user" aria-hidden="true"></i>
    <input required name="username" type="text" placeholder="user">
  </div>
  <div class="box">
    <i class="fa fa-key" aria-hidden="true"></i>
    <input required name="password" type="password" placeholder="pass">
  </div>
  <div class="box">
    <input name="submit" type="submit" value="Login">
  </div>
</form>
</div>
...