-2

I can't seem to put this bar in the center of the page

My code

#menu-header {
  background-color: #009376;
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 2px;
  padding-left: 3px;
  width: 900px;
  display: flex;
  align-self: center;
}
<div><br></br>
  <nav className="navbar navbar-default">
    <div className="container">
      <div className="navbar-header">
        <br/>
        <div>
          <div id="menu-header" className="col-xs-10 col-xs-offset-1">
            <h4>&emsp;Cocktails</h4>
          </div>
        </div>
      </div>
    </div>
  </nav>
</div>

Any help is greatly appreciated , thank you

Rob
  • 14,746
  • 28
  • 47
  • 65
Ibo
  • 93
  • 2
  • 10

3 Answers3

1

I think you better use -

.menu-header-parent {
  display: flex;
  justify-content: center;
}

#menu-header {
  background-color: #009376;
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 2px;
  padding-left: 3px;
  width: 900px;
  display: block;
}
<div><br></br>
  <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <br/>
        <div class="menu-header-parent">
          <div id="menu-header" class="col-xs-10 col-xs-offset-1">
            <h4>&emsp;Cocktails</h4>
          </div>
        </div>
      </div>
    </div>
  </nav>
</div>

Here as referral link for you to understand display: flex. I hope this helps you if there is anything else feel free to ask.

Jithin Raj P R
  • 6,667
  • 8
  • 38
  • 69
  • @Ibo If it was the answer you are looking for plz do mark it as answer. – Jithin Raj P R Sep 18 '17 at 08:18
  • unfortunately it wasn't my friend , but thank you for taking your time to help – Ibo Sep 18 '17 at 08:28
  • @Ibo it will work.. I am using it now and then.. always.. can you give me a live version of your Q?? – Jithin Raj P R Sep 18 '17 at 08:30
  • What do you mean by Q? – Ibo Sep 18 '17 at 11:08
  • @Ibo Q = Question, what I meant was a live sample of your issue.! – Jithin Raj P R Sep 18 '17 at 11:19
  • https://i.imgur.com/8fntWC1.png – Ibo Sep 18 '17 at 11:25
  • `.navbar-header{ display: flex; padding-left: 7em; padding-top: 3em; } #menu-header{ background-color:#009376; padding-left: 1em; padding-top: 0.5em; padding-bottom: 0.5em; padding-right: 0.5em; height: -30px; width: 900px; color:white; } #menu-items{ background-color:#009376; padding-left: 1em; padding-top: 0.5em; padding-bottom: 0.5em; padding-right: 0.5em; height: -30px; width: 900px; color:white; opacity: 0.7; }` – Ibo Sep 18 '17 at 11:27
  • I dont know how to ident it properly sorry – Ibo Sep 18 '17 at 11:31
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/154680/discussion-between-weber-and-ibo). – Jithin Raj P R Sep 18 '17 at 11:38
  • @Ibo please see my answers out in an expanded view **the green bar** is now **`centred`**. So what is exactly you want.? – Jithin Raj P R Sep 18 '17 at 12:02
  • Thanks , i'm sorry for taking so much of your time but i managed to solve the issue through another way – Ibo Sep 18 '17 at 12:47
1

If you want to center the div vertically on the screen, either you can use positioning or you can use margin-top.

unit vh is used to get the vertical screen height.

Eg:

height: 100vh // gets the full height of the screen

Margin-top Method

#menu-header{
 background-color:#009376;
 padding-top:3px;
 padding-right:3px;
 padding-bottom:2px;
 padding-left:3px;
 width: 900px;
 display: flex;
 align-self: center;
 margin-top: calc( 50vh - 33px );
}

But in this method you are more likely to end up with wasting the top space.

Positioning

#menu-header{
 background-color:#009376;
 padding-top:3px;
 padding-right:3px;
 padding-bottom:2px;
 padding-left:3px;
 width: 900px;
 display: flex;
 align-self: center;
 position: absolute;
 top: calc( 50vh - 33px );
}

Here the div is positioned absolute and given a top value.

https://jsfiddle.net/sinthu225/hp2ubymL/

In Both solution Im calculating the top / margin top value by getting the half of actual screen height and deducting the half of the div height

sinthu225
  • 301
  • 3
  • 16
0

Please find below code to bring it to the middle, only thing you need to do is, you should provide height and width of the div. 

#navbar-header {
    position: relative;
}
#menu-header{
  background-color:#009376;
  padding-top:3px;
  padding-right:3px;
  padding-bottom:2px;
  padding-left:3px;
  width: 900px;
  height: 400px;
  display: flex;
  align-self: center;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
lpradhap
  • 623
  • 6
  • 17