Question 394758 in Html Question posted in
Some basic documentation can be found here.

Html – Button label which has ← at the left

I want to make the button label such as

<button style="width:80px">←  back  <button>

then I want to put the ← at the left and set back in the middile of button.

such as

 ____________
|←   back    |

I think I should use Flex ,but a little bit confused, because

← should be at the left

back should be in the middle of button itselt not a remaining space

How can I make this?

Tags:

2

Answers


  1. 0

    You can indeed use Flexbox. The key is to use a combination of justify-content and margin properties to place the arrow to the left and the text in the center.

    <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>
    Login or Signup to reply.
  2. 0

    I think you could use another approach with position absolute and align the text at center

    With this you will achieve two things

    • Keeping the arrow always at left
    • Align the text to the center not considering the arrow at left (as the arrow will have position absolute is not going to align the text at the center)
    <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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search