Centering table created using array map in react web app-CodePudding

I have built a table using the array.map function in react. For some reason (even before the table) the array.map output is always aligned to the left. I would like to center the whole table.

JSX:

<div className="center">
    <table className="center" style={{border:'solid',}}>
      <thead className="has-text-black-bis" style={{backgroundColor:"#e6be8a"}}>
        <tr>
          <th >Product Name:</th>
          <th >Unit Price:</th>
          <th >Quantity Available:</th>
          <th >Buy!</th>
        </tr>
      </thead>
      <tbody className="has-text-black-bis">
        {this.state.indices.map((a) => (
          <tr className="rows">
            <td ><strong>{this.state.itemNames[a]}</strong></td>
            <td ><strong>{this.state.costs[a]}</strong></td>
            <td ><strong>{this.state.quantities[a]}</strong></td>
            <td >
              <button type="button" className='create-btn' onClick={()=>this.buyItem(a)}>Buy!</button>
            </td>
          </tr>
        ))}
      </tbody>
    </table> 
    </div>

CSS:

    .center {
  align-self:center;
  justify-content: center;
  align-items: center;
  align-content: center;
  text-align: center;
}

I have tried all the above css codes and more, tried putting the table in a bulma column and centering it etc. I can get it centered using margins but I am worried that may cause errors on different sized displays, I also get it centered setting display to flex but that messed up the table contents.

Thank you for any help!

CodePudding user response：

Modify your css with this. I gave 100% for width and height but it depends on your design request, you can change it

.center {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

CodePudding user response：

Updated:

Simply add ~~align="center"~~ text-align: center; to the table row class.

like:

.rows { text-align: center; }

.center {
  align-self:center;
  justify-content: center;
  align-items: center;
  align-content: center;
  text-align: center;
}

.rows {
  text-align: center;
}

<div className="center">
    <table className="center" style={{border:'solid',}}>
      <thead className="has-text-black-bis" style={{backgroundColor:"#e6be8a"}}>
        <tr>
          <th >Product Name:</th>
          <th >Unit Price:</th>
          <th >Quantity Available:</th>
          <th >Buy!</th>
        </tr>
      </thead>
      <tbody className="has-text-black-bis">
          <tr >
            <td ><strong>test</strong></td>
            <td ><strong>test</strong></td>
            <td ><strong>test</strong></td>
            <td >
            </td>
          </tr>
          <tr >
            <td ><strong>test</strong></td>
            <td ><strong>test</strong></td>
            <td ><strong>test</strong></td>
            <td >
            </td>
          </tr>
      </tbody>
    </table> 
    </div>