Question

我在这个网址上运行了一个应用：

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

如您所见，表格中有一个循环加载动画。我想把这个动画放在桌子的中间，就像这样（假设它在中心而不是在右边）：

我无法让这个工作。我的尝试是使用class=progress为元素设置样式。我试过了width:100%; margin:auto。我也试过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

这里是我如何解决它的（有一个答案说的几乎相同，但它被删除的原因不明）：

将圈子放在tr和td元素
在colspan=6元素

td

为.progress元素设置text-align:center。

代码：

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

css：

.progress{
    text-align:center
}

无法使用CSS居中圆形动画

1 个答案: