Full centering component
I would like to know if there is a component that allows me to center vertical/horizontal anything I want without writing custom CSS?
I have tried react-center and react-flexbox-grid but without any success. It would be nice if there is some component that allows me to set how I want to align both horizontal and vertical trough properties.
EDIT:
This is the code I have:
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;
I know, that whatever solution on the web I found, it is not working. I can horizontal align everything in the center without any problems, but vertical alignment is a problem.
I am even trying react-flexview component but I can't make it center with vertical alignment.
Thanks.
Answer
I don't know much about FlexView package. You can go without by managing how you organize your styles.
Here is a basic example
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>How you might implement this for 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,
}
The render method may look like this:
return (
<section style={mainContainer}>
<article style={content}>
</article>
</section>
)