Как разделить текст внутри кнопки - PullRequest
Новая
       2

Как разделить текст внутри кнопки

2 голосов
/ 14 января 2020

У меня проблема с новой строкой ... Я хочу, чтобы иконка 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>

Ответы [ 6 ]

4 голосов
/ 14 января 2020

Самый простой способ - использовать 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>
2 голосов
/ 14 января 2020

Вы можете добавить 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>
2 голосов
/ 14 января 2020

Это можно сделать несколькими способами, например:

  • Сделать значок элементом блока.
  • Добавить тег <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>

Break Tag: 

.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>
1 голос
/ 14 января 2020

Вы можете использовать тег 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 голос
/ 14 января 2020

Попробуйте, меньше кода и чисто. 

.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>
1 голос
/ 14 января 2020

Вы можете обернуть текст «Сохранить» в диапазон, а затем отобразить «блок» тега диапазона в вашем CSS. Вот скрипка 

<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;
}
...