Ярлык кнопки с надписью ← слева
Я хочу сделать метку кнопки, например
<button style = "width:80px">← back <button>
тогда я хочу поставить ← слева и установить back посередине кнопки.
такой как
____________
|← back |
Я думаю, мне следует использовать Flex, но я немного запутался, потому что
← должен быть слева
back должно быть в middle of button, а не в remaining space
Как я могу это сделать?
Ответы 5
Вы действительно можете использовать Flexbox. Ключ заключается в том, чтобы использовать комбинацию свойств justify-content и margin, чтобы разместить стрелку слева и текст в центре.
<button style = "width: 80px; display: flex; align-items: center; justify-content: center; position: relative;">
<span style = "position: absolute; left: 8px;">←</span>
<span style = "margin: 0 auto;">back</span>
</button>Вы можете удалить все, кроме объявлений ширины и положения, и получить тот же результат.
Спасибо большое, я понял absolute это ключ к успеху
Я думаю, вы могли бы использовать другой подход с абсолютной позицией и выровнять текст по центру.
Этим вы достигнете двух вещей
- Держите стрелку всегда слева
- Выровняйте текст по центру, не учитывая стрелку слева (поскольку стрелка будет иметь абсолютное положение, текст не будет выравниваться по центру)
<button>
<span class = "arrow">←</span>
<span class = "text">back</span>
</button>
button {
position: relative;
width: 100px;
text-align: center;
}
button .arrow {
position: absolute;
left: 5px;
}
Вы можете попробовать это:
.grid-container {
display: grid;
grid-template-columns: 60px 60px 60px;
padding: 5px;
}
.grid-item {
padding: 5px;
font-size: 20px;
text-align: center;
}<!-- With left arrow aligned to the left and the "Back" in the center of the button -->
<button class = "grid-container">
<span class = "grid-item" style = "text-align:left;">←</span>
<span class = "grid-item">Back</span>
<span class = "grid-item"></span>
</button>
<br>
<!-- With the "Back" in the center of the button (for comparison) -->
<button class = "grid-container">
<span class = "grid-item"></span>
<span class = "grid-item">Back</span>
<span class = "grid-item"></span>
</button>.button {
display: flex;
align-items: center;
justify-content: center;
width: 100px; /* Adjust the width as needed */
padding: 5px;
border: 1px solid #000;
background-color: #f0f0f0;
cursor: pointer;
position: relative;
}
.button .arrow {
position: absolute;
left: 5px; /* Adjust the left position as needed */
}
.button .text {
flex-grow: 1;
text-align: center;
} <button class = "button">
<span class = "arrow">←</span>
<span class = "text">back</span>
</button>Поскольку обратная стрелка — это всего лишь визуальная подсказка, я бы удалил ее из DOM и вместо этого показал бы в псевдоэлементе before, расположенном слева.
Похоже, что браузеры уже центрируют содержимое кнопок, поэтому в этом фрагменте не нужно добавлять выравнивание текста для заднего текста.
button::before {
content: '←';
position: absolute;
left: 0;
}
button {
position: relative;
}<button style = "width:80px">back</button>Я немного увлекся и решил изучить логические свойства этого вопроса. В итоге у меня получилось следующее (но это не оправдывает новый ответ): демо .
Отличный! [но это называется «вперед» справа налево — я полагаю, так оно и есть].
Сегодня у меня был доступ только к одному человеку, который вырос в Египте и говорил по-арабски (на языке справа налево), и я не подумал проверить, считаются ли термины «вперед» и «назад», но я это сделал. Спросите его, какое направление «вперед» и «назад» будет на его языке, и он любезно подтвердил мои предположения о том, что «вперед» по направлению будет указывать налево, а назад — направо. Однако это не обязательно относится к любому другому языку RTL.
Вы можете использовать сетку или задать для средней части правое поле такой же ширины, как и элемент со стрелкой влево.