各种尺寸的按钮内居中字体真棒图标

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

如今通过Flexbox的另一个示例。

Exception has occurred: TypeError
TypeError: Cannot read property 'connection' of undefined

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .7rem;
  background-color: transparent;
  cursor: pointer;
  margin: .5rem;
}

.search {
  width: 5rem;
  height: 6rem;
  border: solid .1rem #006bde;
  font-size: 2.2rem;
  color: #006bde;
}

.envira {
  width: 4rem;
  height: 4rem;
  border: solid .1rem #21b384;
  font-size: 1.5rem;
  color: #21b384;
}

.bell {
  width: 7rem;
  height: 4rem;
  border: solid .1rem orange;
  font-size: 1.6rem;
  color: orange;
}

Answer 2

此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 3

您拥有的代码使图标居中。我通过包含第二个宽度为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>