Center div boxs

Question

I'm trying to do main page for my website, I have picture how it should like this I've tried to use Bootstrap, but they all were stick to each other How should I solve this problem?

Here is my code for html:

<div class=" container-fluid">
    <div class="row" style="margin-top: 15%;">
        <div class="col-md-2 col-md-offset-5 text-center menu">About</div>

        <div class="row">
        <div class="col-md-2 col-md-offset-4 text-center menu ">Skills</div>
        <div class="col-md-2 text-center menu">Projects</div>
        </div>

        <div class="col-md-2 col-md-offset-5 text-center menu">Contact</div>

    </div>
</div>

And here is css:

.menu{
    font-family: 'Poiret One', cursive;
    font-size: 350%;
    color: white;
    background-color:grey;
    border: 1px solid black;
    opacity: 0.95;
    transition-property: all;
    transition-duration: 0.5s;
}

ummmm First I would include the code you are using .. Second .. Possibly `margin`? Without seeing code it's impossible for anyone to help other than just writing it all out from scratch .. — Zak, Apr 19 '17 at 21:42
Show us what you've tried and tell us what worked and didn't work, and then we'll help out. — Michael Coker, Apr 19 '17 at 21:44
Dude, nobody can help you if you don't include your code. We are here to help you solve code problems and get on with our lives. We are not here to write code from scratch for you. Also, why don't you just use `margin`? — NathanielSantley, Apr 19 '17 at 21:46

Badacadabra · Accepted Answer · 2017-04-19T22:10:09.747

Here is a simple example with Flexbox:

.content {
  width: 250px;
  padding: 20px;
  margin: 10px;
  border: solid 10px black;
  text-align: center;
  font-size: xx-large;
}

#wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#middle {
  display: flex;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flexbox</title>
</head>
<body>
  <div id="wrapper">
    <div class="content">text</div>
    <div id="middle">
      <div class="content">text</div>
      <div class="content">text</div>
    </div>
    <div class="content">text</div>
  </div>
</body>
</html>

Josh · Answer 2 · 2017-04-19T22:13:05.573

It's be helpful if you provided some code but to get it just like that image, I have provided the code below - adjustments could be made from there:

        #topdiv{
            width:400px;
            height:40px;
            margin:0 auto;
            border: 2px solid black;
        }
        #leftdiv{
            float:left;
            width:30%;
            margin-left: 17%;
            border: 2px solid black;
        }
        #rightdiv{
            float:right;
            width:30%;
            margin-right: 17%;
            border: 2px solid black;
        }
        #bottomdiv{
            clear: both;
            position: relative;
            width:400px;
            height: 50px;
            bottom:0;
            margin: 0 auto;
            border: 2px solid black;
        }

Then the HTML:

    <!DOCTYPE html>
    <html>
     <head>
        <link rel = "stylesheet" type = "text/css" href = "CSSFILE.css" />
     </head>
     <body>
      <div id = "topdiv">
         Top
      </div>
      <div id = "leftdiv">
         Left
      </div>
      <div id = "rightdiv">
         Right
      </div>
      <div id = "bottomdiv">
         Bottom
      </div>
     </body>
    </html>

score 0 · Answer 3 · edited May 23 '17 at 12:25

You didn't close every row, which is necessary for the bootstrap grid to work the way you want it.

I suppose it depends on the bootstrap version, but at least in codepen the offset classes have to be named differently: offset-md-5 instead of col-md-offset-5 and similar. There seems to be a bug or some inconsistency in the some bootstrap version/s - see also this question: Bootstrap 4 accepting offset-md-*, instead col-offset-md-* Naming Convention Bug

Here's the working code for your situation in a codepen: https://codepen.io/anon/pen/NjxLdj

EDIT / CODE FROM CODEPEN ADDED HERE (but without Bootstrap CSS, i.e. not working without it):

<div class="container-fluid">
  <div class="row" style="margin-top:15%;">
    <div class="col-md-2 offset-md-5 text-center menu">About</div>
  </div>
  <div class="row">
    <div class="col-md-2 offset-md-4 text-center menu">Skills</div>
    <div class="col-md-2 text-center menu">Projects</div>
  </div>
  <div class="row">
    <div class="col-md-2 offset-md-5 text-center menu">Contact</div>
  </div>
</div>

no, they are not: The first one doesn't have a closing ` tag, and the third row is missing completely - compare it with my code here and in my codepen - I'll add the code to my answer too — Johannes, Apr 19 '17 at 22:35
well, that's the code all the answers are referring to... (btw, did you look at my codepen?) — Johannes, Apr 19 '17 at 22:57

score 0 · Answer 4 · edited May 23 '17 at 11:46

I use div and span tags together with css properties such as block, cross-browser inline-block and text-align center, see my simple example here below but solution is obtained from Here

<!DOCTYPE html>
<html>
    <head>
       <title>Page Title</title>
       <style>
           .block{display:block;}
           .text-center{text-align:center;}
           .border-dashed-black{border:1px dashed black;}
           .inline-block{
                 display: -moz-inline-stack;
                 display: inline-block;
                 zoom: 1;
                 *display: inline;
            }
           .border-solid-black{border:1px solid black;}
           .text-left{text-align:left;}
        </style>
    </head>
    <body>
          <div class="block text-center border-dashed-black">
              <span class="block text-center">
                  <span class="block"> 
        <!-- The Div we want to center set any width as long as it is not more than the container-->
                      <div class="inline-block text-left border-solid-black" style="width:450px !important;">
                             jjjjjk
                      </div> 
                  </span>
              </span>
          </div>
      </body>
   </html>

Center div boxs

4 Answers4