Сосредоточение шрифта потрясающий значок внутри кнопки всех размеров

Question

Я создал простую кнопку со значком поиска шрифта.Просто интересно, почему это не всегда по центру.Я также хотел бы, чтобы значок поиска оставался в середине кнопки.

Я думал, что свойство text-align будет работать, но пока мне не повезло.

.button {
    width: 5%;
    padding: 2vh 4vh;
    margin: 1vh 0.5;
    display: inline-block;
    border: solid 0.5vh #000000;
    border-radius: 2vh;
    box-sizing: border-box;
    color: #000000;
    background-color: #ffffff;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    vertical-align: bottom
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="button" type="submit"><i class="fa fa-search" style="text-shadow: 
none;"></i></button>

Answer 1

Этот display:block; padding:0; width:max-content; margin:auto; элемент <I> сотворит магию:

.button {
    width: 5%;
    min-width: max-content; 
    padding: 2vh 4vh;
    margin: 1vh 0.5;
    display: inline-block;
    border: solid 0.5vh #000000;
    border-radius: 2vh;
    box-sizing: border-box;
    color: #000000;
    background-color: #ffffff;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    vertical-align: bottom
}

.button > i { display:block; padding:0; width:max-content; margin:auto; }
 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="button" type="submit"><i class="fa fa-search" style="text-shadow: 
none;"></i></button>

Answer 2

Код, который у вас есть, центрирует значок.Я продемонстрировал это, включив вторую кнопку шириной 50%.По мере масштабирования вашего браузера вы сможете более четко видеть на 50% -ном примере, что значок всегда центрирован.Единственная проблема с вашей попыткой состоит в том, что когда браузер становится слишком маленьким, поля и отступы все еще сохраняются, смещая его вправо.Чтобы исправить это, я изменил вашу ширину до минимальной ширины.Это сохраняет все отступы и поля внутри кнопки и не будет уменьшаться. Если кнопка должна быть меньше этой, я предлагаю использовать медиазапросы для настройки поля и отступов для меньших экранов.

.button {
  min-width: 5%;
  padding: 2vh 4vh;
  margin: 1vh 0.5;
  display: inline-block;
  border: solid 0.5vh #000000;
  border-radius: 2vh;
  box-sizing: border-box;
  color: #000000;
  background-color: #ffffff;
  text-align: center;
  text-decoration: none;
  font-size: 1em;
  cursor: pointer;
  vertical-align: bottom;
}

.button2 {
  min-width: 50%;
  padding: 2vh 4vh;
  margin: 1vh 0.5;
  display: inline-block;
  border: solid 0.5vh #000000;
  border-radius: 2vh;
  box-sizing: border-box;
  color: #000000;
  background-color: #ffffff;
  text-align: center;
  text-decoration: none;
  font-size: 1em;
  cursor: pointer;
  vertical-align: bottom;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="button" type="submit"><i class="fa fa-search" style="text-shadow: 
none;"></i></button>
<br><br>
<button class="button2" type="submit"><i class="fa fa-search" style="text-shadow: 
none;"></i></button>