How to vertically align the wrapper or entire container?

Question

How to vertically align the entire container or wrapper?

(widen the view so it's not narrow to see it in full)

<div class="content-wrapper">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-2 mt-4">
            <a href="/edit" class="no-decoration">
            </a><a href="/edit" class="no-decoration">
            <div class="inforide">
              <div class="row">
                <div class="col-lg-9 col-md-8 col-sm-8 col-8 fontsty">
                  <div class="center">
                    <div class="setting-awesome-font">
                      <i class="fas fa-user fa-1x"></i><br>
                    </div>
                    <div class="setting-text">
                      <h5>Account</h5>
                      <p>Manage your account login details</p><p>
                    </p></div>
                  </div>
                </div>
              </div>
            </div>
          </a></div><a href="/edit" class="no-decoration">
        </a>

          <div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-2 mt-4">
            <div class="inforide">
              <div class="row">
                <div class="col-lg-9 col-md-8 col-sm-8 col-8 fontsty">
                  <div class="center">
                    <div class="setting-awesome-font">
                      <i class="fas fa-university fa-1x"></i><br>
                    </div>
                    <div class="setting-text">
                      <h5>1 Settings</h5>
                      <p>view settings</p><p>
                    </p></div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        <div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-2 mt-4">
          <div class="inforide">
            <div class="row">
              <div class="col-lg-9 col-md-8 col-sm-8 col-8 fontsty">
                  <div class="settings">
                    <div class="center">
                      <div class="setting-awesome-font">
                        <i class="fas fa-file-invoice-dollar fa-1x"></i><br>
                      </div>
                      <div class="setting-text">
                        <h5>History</h5>
                        <p>View history</p><p>
                      </p></div>
                    </div>
                  </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-2 mt-4">
          <div class="inforide">
            <div class="row">
              <div class="col-lg-9 col-md-8 col-sm-8 col-8 fontsty">
                  <div class="settings">
                    <div class="center">
                      <div class="setting-awesome-font">
                        <i class="fas fa-building fa-1x"></i><br>
                      </div>
                      <div class="setting-text">
                        <h5>Settings</h5>
                        <p>View settings</p><p>
                      </p></div>
                    </div>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

As you can see in the fiddle, all of the container aligns left. How can I have it so the container centers?

(my customs css is not involved in the fiddle but isn't important to the situation, most of it is for text-align, coloring, decorations, etc.)

not sure what you want by that. :\ Can you be more specific? — Toan Lu, Mar 08 '19 at 05:26
I want the entire wrapper to be centered. Imagine a dice on the 4 side, like that. instead of how it is, with the 4 dots aligned left. — uno, Mar 08 '19 at 05:27
I think it's better if you could draw it out. I see no dots here!!! — Toan Lu, Mar 08 '19 at 05:33
this is how it is = [:: ] ---- This is how i want it= [ :: ] — uno, Mar 08 '19 at 05:34
https://screenshots.firefox.com/oQYTJtneI8V47tVL/jsfiddle.net This is what it looks like to me — Toan Lu, Mar 08 '19 at 05:36
Yes, it is aligning left, not centered. The entire wrapper i want shifted centered more towards the right — uno, Mar 08 '19 at 05:37
use this ```.content-wrapper { text-align: center; border: 3px solid green; margin: 10%; }``` you can delete border, I kept only for your reference. — Sagar Kulthe, Mar 08 '19 at 05:44

user3322481 · Accepted Answer · 2019-03-08T06:52:43.587

1

You should define a container DOM element within CSS styles with following:

display: flex;
align-items: center; (vertically centered)
justify-content: center; (Horizontally centered)

For example:

div.v-center-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4em;
  border: 1px solid black;
}

<div class="v-center-container">
<div>This is vertically center strings</div>
</div>

Every thing inside DOM element with class v-center-container will automatically vertical alignment.

edited Mar 08 '19 at 06:52

answered Mar 08 '19 at 05:39

user3322481

305
2
4

I don't want to ask you to do more - and i appreciate your time but can you apply this to my fiddle and link me the results. because bootstrap can sometimes interfere... – uno Mar 08 '19 at 05:46
Add "justify-content: center" css for "container-fluid" class, try it – user3322481 Mar 08 '19 at 05:52
... – user3322481 Mar 08 '19 at 05:53
It worked! I applied it to the div class="row" as div class="row v-center-container" to all of the rows and it worked.... looks like the issue was the individual "blocks" as rows were aligning left – uno Mar 08 '19 at 05:54
@uno Yes, the individual blocks are aligning left due to the column size. You can also remove inner grid to make it full width. Demo: http://jsfiddle.net/rhythm19/guwp357b/ – Rhythm Ruparelia Mar 08 '19 at 06:15

fedev · Answer 2 · 2019-03-08T22:36:33.197

1

You can do it with flex classes from Bootstrap.

Flex document: https://getbootstrap.com/docs/4.3/utilities/flex/

Example:

<div class="d-flex justify-content-center align-items-center bg-dark text-light p-5">
<div class="border border-danger p-3">centered content</div>
</div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

edited Mar 08 '19 at 22:36

answered Mar 08 '19 at 07:18

fedev

416
5
16

How to vertically align the wrapper or entire container?

2 Answers2