Html 如何拆分按钮内的文本_Html_Css_Font Awesome

Html 如何拆分按钮内的文本

html css

Html 如何拆分按钮内的文本,html,css,font-awesome,Html,Css,Font Awesome,我对新线有问题。。。我希望图标在上面，文字在下面。有人能解释一下怎么做吗这是我的密码： .options\u按钮{ 浮动：左；宽度：113px；高度：57px；边框右下半径：0px；边框左下半径：0px；边框右上角半径：0px；边框左上半径：0px；填充物：5px；边框：2倍实心；边框颜色：#5f6a77； } 拯救这可以通过多种方式完成，例如：使图标成为块元素添加一个标记将文本包装在块元素中（注意：还有很多方法，这些只是少数）显示块图标： .optio

我对新线有问题。。。我希望图标在上面，文字在下面。有人能解释一下怎么做吗

这是我的密码：

.options\u按钮{
浮动：左；
宽度：113px；
高度：57px；
边框右下半径：0px；
边框左下半径：0px；
边框右上角半径：0px；
边框左上半径：0px；
填充物：5px；
边框：2倍实心；
边框颜色：#5f6a77；
}


拯救

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

使图标成为块元素
添加一个
标记
将文本包装在块元素中

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

显示块图标：

.options\u按钮{
浮动：左；
宽度：113px；
高度：57px；
边框右下半径：0px；
边框左下半径：0px；
边框右上角半径：0px；
边框左上半径：0px；
填充物：5px；
边框：2倍实心；
边框颜色：#5f6a77；
}
.选项按钮i{
显示：块；
}


拯救

最简单的方法是使用flexbox：

.options\u按钮{
宽度：113px；
高度：57px；
边框右下半径：0px；
边框左下半径：0px；
边框右上角半径：0px；
边框左上半径：0px；
填充物：5px；
边框：2倍实心；
边框颜色：#5f6a77；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}


拯救

您可以将“保存”文本包装在span中，然后在CSS中显示span标记“block”。这是你的电话号码


拯救
按钮跨度{
显示：块；
}

您可以添加br以生成新行

.options\u按钮{
浮动：左；
宽度：113px；
高度：57px；
边框右下半径：0px；
边框左下半径：0px；
边框右上角半径：0px；
边框左上半径：0px；
填充物：5px；
边框：2倍实心；
边框颜色：#5f6a77；
}



保存

试试看，代码更少，更干净

.options\u按钮{
宽度：113px；
高度：57px；
边界半径：0px
填充物：5px；
边框：2px实心#5f6a77；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}


拯救

您可以使用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>


.头衔{
颜色：蓝色；
文字装饰：粗体；
文本大小：1米；
}
.作者{
颜色：灰色；
}


拯救

为什么要对块元素使用

？这里面有

。@MichałSadowski，因为W3C认为按钮内的div无效，而span标记则不有效。这就是为什么。

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