how to make button align horizontally using css style-CodePudding

This is how mine looks like

I want it like this

the first picture, it always happened when the there are many column in a table (eg: having 8 column per table) while the second picture only having like 5 column per table

i've tried using vertical - top but i might have done something wrong. both button also having different class.

CodePudding user response：

Make a div and wrap the two icons and give some class then add this CSS to that div,

.that_div_class {
    display: flex;
    align-items: center;
    justify-content: center;
}

After this, you can give other CSS to the two icons as you wish.

CodePudding user response：

To ensure that the action column's icons are horizontally aligned, set a minimum width for the column. This will prevent the icons from being separated from each other horizontally.

Example for using Bootstrap:

<table >
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col" style="min-width: 150px;">Action</th>
    </tr>
  </thead>
...
</table>