Question

我想知道是否有一个组件允许我在不编写自定义CSS的情况下将所需的任何内容置于垂直/水平中心？

我尝试过react-center和react-flexbox-grid但没有任何成功。如果有一些组件允许我设置我想要如何对齐水平和垂直槽属性，那将是很好的。

编辑：

这是我的代码：

    import React from 'react';
import {InputGroup, InputGroupAddon, Input, Button} from 'reactstrap';
import {Row, Col} from 'react-flexbox-grid';
import FlexView from 'react-flexview';

class Login extends React.Component{
    render(){
        return(
            <FlexView hAlignContent='center' vAlignContent='center'>
                <div>
                    {/*Row for username*/}
                    <Row>
                        <Col xs/>

                        <Col xs>
                            <InputGroup id="loginGroup">
                                <InputGroupAddon addonType="prepand">
                                    @
                                </InputGroupAddon>

                                <Input placeholder="username" />
                            </InputGroup>
                        </Col>

                        <Col xs/>
                    </Row>

                    <br/>

                    {/*Row for password*/}
                    <Row>
                        <Col xs="3" sm="3"/>

                        <Col xs="6" sm="6">
                            <InputGroup id="loginGroup">
                                <InputGroupAddon addonType="prepand">
                                    ....
                                </InputGroupAddon>

                                <Input placeholder="password" type="password" />
                            </InputGroup>
                        </Col>

                        <Col xs="3" sm="3"/>
                    </Row>

                    <br/>

                    <Row>
                        <Col xs="3" sm="3"/>

                        <Col className="text-center" xs="6" sm="6">
                            <Button color="primary">Login</Button>
                        </Col>

                        <Col xs="3" sm="3"/>
                    </Row>
                </div>
            </FlexView>
        );
    }
}

export default Login;

我知道，无论我在网上找到什么解决方案，它都无法正常工作。我可以水平对齐中心的所有内容而没有任何问题，但垂直对齐是一个问题。

我甚至尝试使用react-flexview组件，但我无法使其垂直对齐。

感谢。

Answer 1

我对FlexView包知之甚少。您可以通过管理样式的组织方式来完成任务。

这是一个基本的例子

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

main {
  height: 100%;
  display: flex;
  background-color: pink;
  flex-direction: column; /* defined the main axis */
  justify-content: center; /* y-axis */
  align-items: center; /* x-axis */
}

section {
  height: 100px;
  width: 100px;
  background-color: blue;
}

<html>
<body>

  <main>
    <section>
    </section>
  </main>

</body>
</html>

如何为React实现此功能：

// Please see: https://reactjs.org/docs/faq-styling.html
// The parent container that defines the size of the container

const mainContainer = {
  height: 500,
  width: 500,
  display: flex;
  flex-direction: 'column',
  justifyContent: 'center',
  alignItems: 'center',
}

const content = {
  height: 100,
  width: 100,
}

渲染方法可能如下所示：

return (
  <section style={mainContainer}>
    <article style={content}>

    </article>
  </section>
)

Answer 2

我已经设法为我想做的事找到了合适的解决方案。我已经设法使反应中心组件正常工作，这是正在运行的代码：

path

而且，我必须在index.html中为主div设置 style =＆＃34; height：100vh;＆＃34; 。

完全定心组件

2 个答案: