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

Can I center a button inside a span?

I’m working on UI part on my project and want to bring button at the center of span tag,

I tried with text-align: center but it’s not working that way
can anyone please guide how I can bring it to center.

I tried with text-align: center, also tried to keep it outside div but it’s not working that way
Please if anyone guide how I can fix this.

button{
text-align:center;


}
<html>

<body>
Inventory Page
<table>
  <tr>
    <th>Last modified Date</th>
    <div>
<span>
<button> test </button>
</span>
</div>
  </tr>
  <tr>
    <td>Modified by</td>
    
  </tr>
  <tr>
    <td>Name</td>
    
  </tr>
</table>

</body>

</html>
Tags:

2

Answers


  1. 0

    You don’t need the div or the span to centre the button, edit the button css as follows

    <button style="display: block; margin: 0 auto"> test </button>
    Login or Signup to reply.
  2. 0

    you could set the display on button to block and then add margin:0 auto but a better way is to use flex. set the display on the div surrounding the button to flex and add justify-content:center

    #button {
  text-align: center;
  margin: 0 auto;
  border: solid 1px red;
  display: block;
}

#container{
display:flex;
justify-content:center;
}
    <html>

<body>
  Inventory Page
  <table>
    <tr>
      <th>Last modified Date</th>
      <div >

        <button id='button'> test </button>

      </div>
    </tr>
    <tr>
      <td>Modified by</td>

    </tr>
    <tr>
      <td>Name</td>

    </tr>
  </table>
  
  Inventory Page
  <table>
    <tr>
      <th>Last modified Date</th>
      <div id='container'>

        <button > test </button>

      </div>
    </tr>
    <tr>
      <td>Modified by</td>

    </tr>
    <tr>
      <td>Name</td>

    </tr>
  </table>

</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search