0

我想知道是否有一个组件可以让我在不编写自定义 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 组件，但我无法使其以垂直对齐方式居中。

谢谢。

4

2 回答 2

0

我对 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>
)
于 2018-06-16T02:00:55.867 回答
0

我已经设法为我想做的事情找到合适的解决方案。我已经设法使 react-center 组件正常工作，这是正在工作的代码：

    import React from 'react';
import ReactCenter from 'react-center';
import {Row, Col} from 'react-flexbox-grid';
import Input from '@material-ui/core/Input';
import Button from '@material-ui/core/Button';


class Login extends React.Component{
    render(){
        return(
            <div id="loginForm" style={{height: "100vh", width: "100vw"}}>
                <ReactCenter style={{height: "100vh", width: "100vw"}}>
                        <div style={{height: "200px", width: "300px"}}>
                            <Row>
                                <Col xs="3" sm="3" lg="3"/>

                                <Col xs="6" sm="6" lg="6">
                                    <Input placeholder="username" />
                                </Col>

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

                            <br/>

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

                                <Col xs="6" sm="6" lg="6">
                                    <Input placeholder="password" type="password" />
                                </Col>

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

                            <br/>

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

                                <Col xs="6" sm="6" lg="6">
                                    <Button variant="outlined" color="primary">Login</Button>
                                </Col>

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

export default Login;

而且，我不得不放置 style="height: 100vh;" 在主 div 的 index.html 中。

于 2018-06-16T15:57:22.967 回答