Twitter Bootstrap Question posted in

What is the best way to center a div inside another div?-Twitter bootstrap

I have so far been trying to create a basic website layout shown in this picture.
https://imgur.com/a/JhURder

It includes a grey background, with a centered div inside with a white background. With centered an image to the left and text etc to the right.

I am a large advocate for twitter bootstrap, so far I have implemented this. (React style) 

            <div class="container-fluid" style={{
                'background-color' : 'rgb(224,225,226)',
                'height' : '40vh'
            }}>
                <div class="row">
                    <div class="col-1 text-center"> Test </div>

                    <div class="col-10 text-center" style={{
                        'height' : '30vh',
                        'background-color' : 'rgb(255,255,255)',
                        'margin-top' : '5vh'
                    }}>

                    centered

                    </div>

                    <div class="col-1 text-center">test</div>
                </div>
            </div>

So far it half ways. But honestly I kind of gave us because it’s turned into a nested mess. With website development I always know their is a bigger way, so I come here for people to roast my attempt so far and could give me in a proper way of reaching my goal.

Tags:

3

Answers


  1. 0

    Try setting the css margin: 0 auto in your inner div that you want to center.

    Login or Signup to reply.
  2. 0

    Here’s some ideas of how you can achieve it.

    https://codepen.io/Warisara-L/pen/wOMxwR

    // HTML
<div class="wrapper" id="solution-1">
  <div class="inner">1</div>
</div>

// SCSS
#solution-1 {
  display: grid;
  .inner {
    margin: auto;
  }
}

#solution-2 {
  display:flex;
  justify-content: center;
  align-items: center;
}

#solution-3 {
  position: relative;
  .inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

#solution-4 {
  display: flex;
  .inner {
    margin: auto;
  }
}

#solution-5 {
  display: grid;
  justify-content: center;
  align-items: center;
}

#solution-6 {
  position: relative;
  .inner {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

#solution-7 {
  height: 120px;
  line-height: 120px;
  text-align: center;
  .inner {
    display: inline-block;
    vertical-align: middle;
  }
}

#solution-8 {
  display: flex;
  .inner {
    align-self: center;
    margin: 0 auto;
  }
}

    Have a good day sir 🙂

    Login or Signup to reply.
  3. 0

    With FlexBox

    With display: flex; you can specify the properties justify-content and align-items to center in order to center child elements both horizontally and vertically.

    When a display: flex element is a row (flex-direction: row;) justify-content will handle horizontal positioning while align-items handles vertical positioning. When flex-direction is set to column, justify-content and align-items meanings are swapped.

    Example:

    .parent-element {
  display: flex;
  /* flex-direction defaults to row */

  justify-content: center;
  align-items: center;
}

    With CSS Grid

    You can utilize the property place-items to center the children of a grid. You should be aware, however, that place-items is not currently supported on all browsers.

    Example:

    .parent-element {
  display: grid;
  place-items: center;
}

    Margin auto

    Sometimes you can utilize the auto value for the margin property to push an element towards the center.

    Be sure to check out this post that explains what is needed for margin: auto; to work.

    Example:

    .child-element {
  /* top right bottom left -- all set to auto */
  margin: auto;
}

    Absolute positioning with a transform

    You can position an item in the center of the screen by setting the position property to absolute (this will take it out of the normal document flow). Then, you can use the properties left and top to move the element down and to the right 50%.

    Once it’s pushed 50% we need to move it back half the width/height of the element, we can do that with a translate inside the property transform.

    Example:

    .child-element {
  position: absolute;
  top: 50%;
  left: 50%;

  /* translate(<x value>, <y value>) */
  transform: translate(-50%, -50%);
}

    Disclaimer:

    This is not advised for elements that are a part of your normal document flow as they will most likely overlap other elements. It’s great for modals though.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search