skip to Main Content

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?

2

Answers


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