Can't center div in another div

I'm trying to make a menu bar centered horizontally in the header of my page. For some reason, i can't get the centering to work. I made a little test page roughly displaying the problem: JSFiddle. The inner div has to be 5px away from the bottom, that's whatI use the position: absolute for.

I've tried searching on the web alot, but everything I find gives me the same result, or none at all. Most problems I found were when text-align: center wasn't in the container div, but even with it, it still doesn't work.

Answers


I removed two css attributes and it work.

position: absolute;
bottom: 5px;

Check this Fiddle

5px from bottom. Fiddle


This is not a perfect way, but it's still kind of useful. I first think of this idea from this Q&A.

You'll have to make some change to your HTML:

<div id="container">
    <div id="wrapper-center"> <!-- added a new DIV layer -->
        <div id="inner_container">
            TEXT ELEMETNES IN THIS THING!!!!
        </div>
    </div>
</div>

And the CSS will change to:

#container {
    background: black;
    width: 100%;
    height: 160px;
    position: relative;
}
#inner_container {
    display: inline-block;
    width: auto;
    color: white;
    background-color: #808080;
    padding: 5px;
    position: relative;
    left:-50%;
}
#wrapper-center {
    position:absolute;
    left:50%;
    bottom:5px;
    width:auto;
}

Demo fiddle

The trick is to place the wrapper at the given top-bottom position, and 50% from left (related to parent), and then make the true content 50% to left (related to the wrapper), thus making it center.

But the pitfall is, the wrapper will only be half the parent container's width, and thus the content: in case of narrow screen or long content, it will wrap before it "stretch width enough".


If you want to centre something, you typically provide a width and then make the margins either side half of the total space remaining. So if your inner div is 70% of your outer div you set left and right margins to 15% each. Note that margin:auto will do this for you automatically. Your text will still appear to one side though as it is left-aligned. Fix this with text-align: centre.

PS: you really don't need to use position absolute to centre something like this, in fact it just makes things more difficult and less flexible.

  * {
    margin: 0;
    padding: 0;
  }
    #container {
    background: black;
    width: 100%;
    height: 160px;
  }
  #inner_container {
    color:red;
    height:50px;
    width: 70%;
    margin:auto;
    text-align:center;
  }

If you don't want a fixed width on the inner div, you could do something like this

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

That makes the inner div to an inline element, that can be centered with text-align.

working Ex


this CSS changes will work :

#container {
    background: black;
    width: 100%;
    height: 160px;
    line-height: 160px;
    text-align: center;
}
#inner_container {
    display: inline;
    margin: 0 auto;
    width: auto;
    color: white;
    background-color: #808080;
    padding: 5px;
    bottom: 5px;
}

Try this:

html

<div id="outer"><div id="inner">inner</div></div>

css

#outer {
    background: black;
    width: 100%;
    height: 160px;
    line-height: 160px;
    text-align: center;
}
#inner{
    display: inline;
    width: auto;
    color: white;
    background-color: #808080;
    padding: 5px;
    bottom: 5px;
}

example jsfiddle


You may set the inline style for the inner div.

HTML:

  <div id="container">
    <div align="center" id="inner_container" style="text-align: center; position:absolute;color: white;width:100%; bottom:5px;">
       <div style="display: inline-block;text-align: center;">TEXT ELEMETNES IN THIS THING!!!!</div>
    </div>
  </div>

Here is working DEMO


Need Your Help

The best way of combining a picture with textboxes

html asp.net css html5

I've gotten a task which I feel I really don't know the best approach for.

angular $routeprovider endless optional param

javascript angularjs angularjs-routing route-provider

I'm trying to create file &amp; folder manager using angular-js.