Open diegoaguilar opened 8 years ago
@diegoaguilar Make sure everything containing the flexed elements has height set properly e.g.
html, body, .grid-container { height: "100vh" } .grid { position: "absolute", top: 0, bottom: 0, left: 0, right: 0}
☝️ that
Hi guys! I'm with the same issue. I want to vertical align the row containing the textfields and the button.
export default class App extends React.Component { render() { return ( <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}> <div className="container-fluid middle-xs"> <div className="row center-xs"> <div className="col-xs-12"> <div className="row center-xs"> <div class="col-xs-12"> <TextField label="User" /> </div> </div> <div className="row"> <div className="col-xs-12"> <TextField label="Password" type="password" /> </div> </div> <div className="row"> <div className="col-xs-12"> <RaisedButton label="Login" /> </div> </div> </div> </div> </div> </MuiThemeProvider> ); } } ```I render that component inside a div `render(<App />, document.getElementById('render-target'));` Index HTML ```html <body> <div id="render-target"></div> </body>
CSS with the tip that @chrismcleod gave
html, .container-fluid, #render-target { min-height: 100vh;}
What should I do? Thanks!
Looking for a solution I found that .container and .container-fluid classes don't have flex properties. Sorry for my bad english. Thank you.
@noobgamer95 Check out the flexbox spec. If you find yourself thinking "I need justify-self" use margin: auto in your css. My guess is add margin-top: auto to whichever flex item you want vertically aligned.
You can achieve centered, vertical and horizontal alignment with the following:
.full-height { height: 100vh }
<div className="fluid-container">
<div className="row full-height center-xs middle-xs">
<div className="col-xs-10 col-sm-6 col-md-4">
<h2>Hello world</h2>
</div>
</div>
</div>
Try this: Give this CSS to the div which you have to centralize..
.class-name {
margin: 0px;
padding:0px;
float: left;
width:100%;
position:absolute;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left:50%;
}
I'm working flexboxgrid in a React application using also Material UI components. I'm trying to make Registrar una tienda from to get vertical and horizontal alignment.
So, I've done this so far:
Outer top component:
<StoreRegister />
is inner component, where the form is present:So, this achieves horizontal alignment but I'd like the web to take the whole viewport height, and be placed in the middle. I tried adding
middle-xs
but got not results