html - 如何拆分按钮内的文本

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

最简单的方法是使用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>