How to center a single item within a flexbox that has multiple items?

Question

Currently my .css code is:

.form-wrapper {
  display: flex;
  justify-content: space-between
}

.testingForm {
  max-width: 320px;

}

.centerThis {
  align-self: center;
}

And my .js code is:

<div className="form-wrapper">
  <div className="testingForm">
    <FormGroup
      controlId="stuff"
      bsSize="large"
    >
      <ControlLabel>Stuff</ControlLabel>
      <FormControl
      />
    </FormGroup>
  </div>
  <div className="centerThis">
    <h1>Stuff here</h1>
  </div>
</div>

How can I center the "centerThis" className and leave the "testingForm" className where it currently is? I can't seem to detach the "testingForm" and the "centerThis". I've tried align-content and various other methods to solve this issue with no luck.

Incase this helps, the html output from the inspector after running the development server shows:

<div class="form-wrapper"><div class="testingForm"><div class="form-group form-group-lg"><label for="accountID" class="control-label">Stuff</label><input id="ID" class="form-control" value=""></div></div><h1>AWS</h1></div>

Please provide the corresponding html, react does not help to explain (or reproduce) the problem (given its components may return any markup back) — zerkms, Jul 06 '18 at 00:06
Possible duplicate of [How to horizontally center a
in another
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div) — Adriano, Jul 06 '18 at 00:06
@Adriano no it's different. I've already looked at that page without any luck. — DJ Poland, Jul 06 '18 at 00:10
@zerkms the corresponding html from the inspector outputs
Stuff
AWS — DJ Poland, Jul 06 '18 at 00:19

caiovisk · Accepted Answer · 2018-07-06T01:01:54.790

0

Set the flex first level div's as width: 100%;

.form-wrapper > div {
    width: 100%;
}

Then the .centerThis you can text-align:center if it is just text and/or image or you can set it as display:flex and justify-content:center.

.centerThis {
    text-align: center;
}

Or

.centerThis {
    display: flex;
    justify-content: center;
}

.form-wrapper {
  display: flex;
}
.form-wrapper > div{
  width: 100%;
}

.testingForm {
  max-width: 320px;

}

.centerThis {
  text-align: center;
}

<div class="form-wrapper">
  <div class="testingForm">
    <FormGroup
      controlId="stuff"
      bsSize="large"
    >
      <ControlLabel>Stuff</ControlLabel>
      <FormControl
      />
    </FormGroup>
  </div>
  <div class="centerThis">
    <h1>Stuff here</h1>
  </div>
</div>

EDITED:

Based on your output HTML...

Set the flex first level elements as width: 100%;

.form-wrapper > div,
.form-wrapper > h1 {
    width: 100%;
}

Then the h1 set it as display:flex and justify-content:center and align-items: center.

.form-wrapper h1 {
    display: flex;
    justify-content: center;
    align-items: center;

}

body, html {
  height: 100%;
  margin: 0; /* Reset browser default */
}
.form-wrapper {
  display: flex;
  height: 100%;
}
.form-wrapper > div,
.form-wrapper > h1{
  width: 100%;
}

.testingForm {
  max-width: 320px;

}

.form-wrapper h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    
}

<div class="form-wrapper">
  <div class="testingForm">
    <div class="form-group form-group-lg">
      <label for="accountID" class="control-label">Stuff</label>
      <input id="ID" class="form-control" value="">
    </div>
  </div>
  <h1>AWS</h1>
</div>

edited Jul 06 '18 at 01:01

answered Jul 06 '18 at 00:29

caiovisk

3,667
1
12
18

How do you want to detach it? like one below another? – caiovisk Jul 06 '18 at 00:42
I want them to remain horizontal and side-by-side, but I want the h1 tag to be in the center horizontally whereas the Form remains on the left where it is at with max-width: 320px. So basically they're spaced from each other but the h1 tag is centered. – DJ Poland Jul 06 '18 at 00:46
Great! I have updated the question based on your latest info... hopes it make sense... – caiovisk Jul 06 '18 at 01:02
Your updated response helped me even more cause there was an issue, so thanks! – DJ Poland Jul 06 '18 at 01:04
Unfortunately when I increase the screen size the h1 tag is not centered. Is there any way to resolve that? – DJ Poland Jul 06 '18 at 01:17
That's weird, both snippets when I look on Full Page mode it shows the H1 centred, tested in different screens size here... – caiovisk Jul 06 '18 at 01:25
Problem has been resolved. Had to input some padding, but your help has led me to the answer. – DJ Poland Jul 06 '18 at 20:29

How to center a single item within a flexbox that has multiple items?

AWS

1 Answers1