为什么我的 SVG 在 React Bootstrap 中不会垂直对齐？

Question

玩 React Bootstrap 我无法让我的 SVG 垂直居中。组件：

ComingSoon.js:

import React from 'react'

import { Container, Row, Col, Image } from 'react-bootstrap'

// SVG
import comingSoonSVG from './coming-soon.svg'

const ComingSoon = () => {
  return (
    <Container className="h-100">
      <Row className="align-items-center">
        <Col md={{ span: 8, offset: 2 }}>
          <Image src={comingSoonSVG} alt="Coming Soon" />
        </Col>
      </Row>
    </Container>
  )
}

export default ComingSoon

app.js:

import React from 'react'

import 'bootstrap/dist/css/bootstrap.min.css'

// Components
import ComingSoon from './components/ComingSoon'

const App = () => {
  return (
    <>
      <ComingSoon />
    </>
  )
}

export default App

根据我的研究，这应该基于：

You can apply any of Bootstrap's classes to a React Bootstrap component.

所以我引用了 Vertical alignment，甚至在 <Row className="row align-items-center"> 中添加和删除了行，但它仍然不起作用。

阅读我读过的其他问答：

（认为这是 Bootstrap 3 而不是 4）
React Bootstrap - how to center image vertically in a row 当使用 <Row className="justify-content-md-center row"> 时，它不会将图像垂直居中并略微向右抛出。

其他阅读：

在 docs 中未找到解决方案或示例。

在 React 中 Bootstrap 如何垂直对齐列中的图像？

Answer 1

不要认为是 SVG 引起了问题，因为它在图像标记中。

我已经尝试复制你的代码，为了让它工作，你必须为你的容器定义一个高度（比如 300px 而不是 100%），然后用 h-100 定义行。

我在 codepen 上做了一些例子，说明 align-items-center 如何处理不同类型的内容。

This one 有两列，两列都有内容。

<div class="container">
  <div class="row align-items-center">
    <div class="col-md-6">
      <h1>Title</h1>
    </div>
    <div class="col-md-6">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vehicula viverra erat vitae ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus sodales felis, at facilisis lorem laoreet nec. Duis at tempus tellus, sed mollis odio. Nunc turpis urna, elementum ac nulla a, tincidunt imperdiet elit. Donec sit amet accumsan nulla, sit amet lacinia eros. Proin non velit id velit dapibus tristique. Mauris elementum quam a ultricies facilisis. Cras ligula leo, rhoncus eget dignissim ac, sagittis eu est. Pellentesque ut justo eget justo feugiat fringilla. Nunc vel congue lorem.
         Nunc sit amet turpis arcu. In vitae maximus justo, vitae eleifend ante. Sed efficitur rhoncus turpis ut semper. Vivamus libero sapien, semper vel sapien nec, eleifend imperdiet justo. Maecenas vulputate turpis risus, non tristique mi scelerisque eu. Mauris elementum ipsum eu quam rhoncus, id tempor sem volutpat. Nunc scelerisque rutrum lectus, nec porttitor elit vehicula eu. Praesent tempor diam sit amet elit porta suscipit.
         Nullam accumsan tincidunt aliquet. Mauris pulvinar quam at urna vehicula ullamcorper volutpat eget ante. Curabitur scelerisque neque felis, id imperdiet ex tincidunt non. Sed quis ullamcorper sapien, at placerat turpis. Aenean at mauris vitae est iaculis scelerisque. Pellentesque consectetur lacinia ante, ac volutpat leo laoreet in. Vivamus fringilla, odio eu porttitor consequat, mauris ligula sodales magna, vel pulvinar nunc sem at eros. Nullam sed feugiat ante. Quisque aliquam facilisis efficitur. Nunc laoreet id risus luctus accumsan. Curabitur id cursus ante. Vivamus quis eros quis ligula aliquet tempus.</p>
    </div>
  </div>
</div>

This other one 只有一列，所以我必须为容器指定一个高度。

<div class="container ">
  <div class="row align-items-center h-100">
    <div class="col-md-6">
      <h1>Title</h1>
    </div>
  </div>
</div>

<style>
.container {
  height: 300px;
}
</style>

希望这能澄清并帮助您了解如何对齐代码中的项目。

Answer 2

这个经过测试似乎只有在将其应用于文本时才有效。在进一步探索兔子洞并阅读 Bootstrap 周围的几个 Codepens 和 Codeplys 之后，我能够通过定位 Container、组件：

来解决垂直图像居中问题

import React from 'react'

import { Container, Row, Col, Image } from 'react-bootstrap'

// SVG
import comingSoonSVG from './coming-soon.svg'

const ComingSoon = () => {
  return (
    <Container style={containerStyles}>
      <Row>
        <Col md={{ span: 6, offset: 3 }} className="d-flex justify-content-center">
          <Image style={imgStyles} src={comingSoonSVG} alt="Coming Soon" />
        </Col>
      </Row>
    </Container>
  )
}

const containerStyles = {
  minHeight: '100vh',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
}

const imgStyles = {
  height: '60vmin',
}

export default ComingSoon

为什么我的 SVG 在 React Bootstrap 中不会垂直对齐？

Why will my SVG not vertically align in React Bootstrap?

reactjs

react-bootstrap

bootstrap-4