完全居中零部件
完全居中零部件
提问于 2018-06-16 02:09:01
我想知道是否有一个组件可以让我在不编写自定义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组件，但是我不能让它以垂直对齐居中。
谢谢。
回答 2
Stack Overflow用户
发布于 2018-06-16 10:00:56
我对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,
}render方法可能如下所示：
return (
<section style={mainContainer}>
<article style={content}>
</article>
</section>
)Stack Overflow用户
发布于 2018-06-16 23:57:23
我已经设法为我想做的事情找到了合适的解决方案。我已经设法使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;对于ofc，我必须将style=“：100vh；”放在主目录的index.html中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50880724
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号