Vertical alignment - Githubissues

diegoaguilar commented 8 years ago

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:

  <div>
    <MenuAndNav />
    <div className='row center-md center-xs'>
      <div className="col-xs-12">
        <div className="box">
          <Tabs>
            <Tab label="Registro">
              <StoreRegister />
            </Tab>
            <Tab label="Modificar">
              <StoresList />
            </Tab> 
          </Tabs>
        </div>
      </div>
    </div>
  </div>

<StoreRegister /> is inner component, where the form is present:

  <div className='row center-xs'>
    <div className='col-xs-12 middle-xs'>
      <div className='box'>
        <h3>Registrar una tienda</h3>
        <RegisterComponent />
      </div>
    </div>
  </div>

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

chrismcleod commented 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}

kristoferjoseph commented 8 years ago

☝️ that

ezegon commented 8 years ago

Hi guys! I'm with the same issue. I want to vertical align the row containing the textfields and the button. Login image

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.

chrismcleod commented 8 years ago

@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.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

benbarber commented 7 years ago

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>

hgsadhrakiya commented 6 years ago

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%;
}

kristoferjoseph / flexboxgrid

Vertical alignment #167