使用 React-Bootstrap 垂直居中元素答案

【问题标题】：Vertically center elements using React-Bootstrap使用 React-Bootstrap 垂直居中元素
【发布时间】：2020-11-13 16:32:57
【问题描述】：

我想使用引导程序垂直居中和居中对齐元素，但无法实现。我使用 react-bootstrap col 和 row 组件。

这是我的 Codesandbox：Link

这是我的代码：

import React, { PureComponent } from "react";

import {
  ButtonGroup,
  Classes,
  H4,
  Icon,
  Intent,
  Tooltip
} from "@blueprintjs/core";
import { IconNames } from "@blueprintjs/icons";
import { Box } from "@rebass/grid";
import { Container, Row, Col } from "react-bootstrap";
import cx from "classnames";
import "styled-components/macro";

import ExportSVG from "./export.svg";

import UploadFile from "./UploadFile";

const getFileExtension = file => {
  return file && file[0].name.split(".")[file[0].name.split(".").length - 1];
};

const INITIAL_STATE = {
  error: null,
  isBusy: false,
  file: null,
  generatedFile: undefined,
  fileTypeError: false
};

const tooltipContent = "Export this scenario data into an existing Excel file";

class ExportForm extends PureComponent {
  state = INITIAL_STATE;

  render() {
    const { scenarioId } = this.props;
    const { isBusy, file, generatedFile } = this.state;
    return (
      <Container style={{ backgroundColor: "red" }}>
        <Row className="justify-content-between">
          <Col xs={4}>
            <ButtonGroup>
              <Tooltip content={tooltipContent}>
                <Icon intent={Intent.PRIMARY} icon={IconNames.HELP} />
              </Tooltip>
              <H4>
                <Box as="span" mx={2}>
                  Export
                </Box>
                <img alt="" src={ExportSVG} />
              </H4>
            </ButtonGroup>
          </Col>
          <Col xs={4}>
            {!file && !generatedFile && (
              <Box>
                <input
                  type="file"
                  id="uploadFileExport"
                  accept=".xlsm"
                  onChange={this.handleFileChange}
                />
                <label
                  htmlFor="uploadFileExport"
                  className={cx(Classes.BUTTON, Classes.INTENT_PRIMARY)}
                >
                  <span>Select file</span>
                </label>
              </Box>
            )}
          </Col>
        </Row>
        {file && (
          <Box mt={1}>
            <UploadFile
              isBusy={isBusy}
              fileExtension={".xlsm"}
              file={file}
              handleCancelClick={this.handleCancelClick}
              uploadButtonText={"Export"}
              uploadIcon={"cloud-download"}
              fileUploadData={this.handleExport}
              handleFileChange={this.handleFileChange}
              uploadComment={`Upload for export from ${scenarioId}`}
            />
          </Box>
        )}
      </Container>
    );
  }

  handleCancelClick = () => this.setState(INITIAL_STATE);

  handleFileChange = event => {
    const { files } = event.currentTarget;

    if (getFileExtension(files) === "xlsm") {
      this.setState({ file: files && files[0], fileTypeError: false });
    } else {
      this.setState({ fileTypeError: true, file: null });
    }
  };
}

export default ExportForm;

这就是我所拥有的：

图标、文本应与容器左对齐和居中对齐，按钮与容器右对齐。

请指教。任何帮助表示赞赏。

【问题讨论】：

标签： css reactjs twitter-bootstrap bootstrap-4 react-bootstrap

【解决方案1】：

这里是沙盒链接https://codesandbox.io/s/festive-curie-350xo?file=/src/ExportForm.jsx

您需要在行上添加高度并添加 align-items-center

参考：https://getbootstrap.com/docs/4.5/layout/grid/#vertical-alignment

<Row style={{ height: "100px" }} className="align-items-center">
  <Col> </Col>
  <Col xs="auto"> </Col>
</Row>

更新：BS 已经这样做了

更新：你可以从这里获得帮助https://css-tricks.com/centering-css-complete-guide/

【讨论】：

没有高度可以吗？

【解决方案2】：

这是我的解决方案

Codesandbox

我为红色部分设置了垂直居中的内容，使用了 flexbox 并在其周围放置了一些填充。

由于您使用的是引导程序，因此我使用了内置的引导程序 css 类。

【讨论】：