如何拆分按钮内的文本

Question

我对新行有疑问...我希望 Fontawesome 图标位于顶部，文本位于其下方。有人可以解释一下怎么做吗？

这是我的代码：

.options_button{
 float: left;
 width: 113px;
 height: 57px;
 border-bottom-right-radius: 0px;
 border-bottom-left-radius: 0px;
 border-top-right-radius: 0px;
 border-top-left-radius: 0px;
 padding: 5px;
 border: 2px solid;
 border-color: #5f6a77;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<button class="options_button">
  <i class="fas fa-image"></i>
  Save
</button>

Answer 1

这可以通过多种方式完成，例如：

使图标成为块元素。
添加 <br> 标签。
将文本包裹在块元素中。

(注意：还有很多方法，这些只是少数)

显示块图标：

.options_button {
    float: left;
    width: 113px;
    height: 57px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    padding: 5px;
    border: 2px solid;
    border-color: #5f6a77;
}

.options_button i {
    display: block;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<button class="options_button">
  <i class="fas fa-image"></i>
  Save
</button>

中断标签：

.options_button {
    float: left;
    width: 113px;
    height: 57px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    padding: 5px;
    border: 2px solid;
    border-color: #5f6a77;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<button class="options_button">
  <i class="fas fa-image"></i><br />
  Save
</button>

显示块文本

.options_button {
    float: left;
    width: 113px;
    height: 57px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    padding: 5px;
    border: 2px solid;
    border-color: #5f6a77;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<button class="options_button">
  <i class="fas fa-image"></i><br />
  <div>Save</div>
</button>

Answer 2

最简单的方法是使用flexbox:

.options_button{
 width: 113px;
 height: 57px;
 border-bottom-right-radius: 0px;
 border-bottom-left-radius: 0px;
 border-top-right-radius: 0px;
 border-top-left-radius: 0px;
 padding: 5px;
 border: 2px solid;
 border-color: #5f6a77;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<button class="options_button">
  <i class="fas fa-image"></i>
  Save
</button>

Answer 3

您可以将 "Save" 文本包裹在一个 span 中，然后在 CSS 中显示 span 标签 "block"。这是 fiddle

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<button class="options_button">
  <i class="fas fa-image"></i>
  <span>Save</span>
</button>

button span{
  display: block;
}

Answer 4

可以加一个br换行

.options_button {
  float: left;
  width: 113px;
  height: 57px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  padding: 5px;
  border: 2px solid;
  border-color: #5f6a77;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<button class="options_button">
  <i class="fas fa-image"></i>
  <br/>Save
</button>

Answer 5

试试吧，代码少而且干净。

.options_button{
 width: 113px;
 height: 57px;
  border-radius: 0px
 padding: 5px;
 border: 2px solid #5f6a77;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<button class="options_button">
  <i class="fas fa-image"></i>
  Save
</button>

Answer 6

您可以使用 br 标签强制换行。

<html>
<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  <style type="text/css">
    .title {
      color: blue;
      text-decoration: bold;
      text-size: 1em;
    }
    .author {
      color: gray;
    }
  </style>
</head>
<body>
  <button class="options_button">
    <i class="fas fa-image"></i>
    <br>
    Save
  </button>
</body>
</html>

如何拆分按钮内的文本

How to split text inside button

html

css

font-awesome

显示块图标：

中断标签：

显示块文本