javascript - 无法使用 CSS 将圆形动画居中

Question

我在这个 URL 上运行了一个应用程序:

https://sentify-kth.herokuapp.com/my-searches

可以看到，表格中有一个循环的加载动画。我想把这个动画放在表体的中间，像这样(想象它在中间而不是稍微偏右):

我无法让它工作。我的尝试是使用 class=progress 来设置元素的样式。我试过 width:100%; margin :自动。我也尝试过 text-align:center。那也没用。我不知道还能尝试什么。

如何让圆形动画居中？

React 代码:

  render() {
    const { classes } = this.props;
    const { data, selected, rowsPerPage, page } = this.state;
    let tableBody;
    let emptyRows;
    switch(this.state.status){
      case "LOADING":
        tableBody = <CircularIndeterminate/>;
        emptyRows = undefined;
        break;
      case "LOADED":
        tableBody = <CircularIndeterminate/>;
        break;
    }

    return (
      <Paper className={classes.root}>
        <EnhancedTableToolbar
            numSelected={selected.length}
            handleClickDeleteBtn={this.handleClickDeleteBtn}
            open={this.state.open}
            handleCloseModal={this.handleCloseModal}
            handleConfirm={this.handleConfirm}
            handleCancel={this.handleCancel}
        />
        <div className={classes.tableWrapper}>
          <Table className={classes.table}>
            <EnhancedTableHead
              numSelected={selected.length}
              onSelectAllClick={this.handleSelectAllClick}
              rowCount={data === null || data === undefined ? -1 : (data.length || -1)}
            />
            <TableBody>
              {tableBody}
              {emptyRows > 0 && (
                <TableRow style={{ height: 49 * emptyRows }}>
                  <TableCell colSpan={6} />
                </TableRow>
              )}
            </TableBody>
          </Table>
        </div>
        <TablePagination
          component="div"
          count={data === null || data === undefined ? 0 : data.length || 0}
          rowsPerPage={rowsPerPage}
          page={page}
          backIconButtonProps={{
            'aria-label': 'Previous Page',
          }}
          nextIconButtonProps={{
            'aria-label': 'Next Page',
          }}
          onChangePage={this.handleChangePage}
          onChangeRowsPerPage={this.handleChangeRowsPerPage}
        />
      </Paper>
    );
  }
}

CircularIndeterminate.js:

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import { CircularProgress } from 'material-ui/Progress';

const styles = theme => ({
  progress: {
    margin: theme.spacing.unit * 2,
  },
});

function CircularIndeterminate(props) {
  const { classes } = props;
  return (
    <div className="progress">
      <CircularProgress className={classes.progress} size={100} thickness={4}/>
    </div>
  );
}

CircularIndeterminate.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(CircularIndeterminate);

Answer 1

这是我解决它的方法(有一个答案说的几乎是同一件事，但由于未知原因被删除了):

1. 将圆放在 tr 和 td 元素中
2. 在 td 元素上设置 colspan=6
3. 为 .progress 元素设置 text-align:center。

代码:

tableBody = (
          <tr>
            <td colspan="6">
              <CircularIndeterminate/>
            </td>
          </tr>
          );

CSS:

.progress{
    text-align:center
}