CODEWITHSUNDEEP
javascripthtmlcentering
Ashraf Bashir
Ashraf Bashir

Reputation: 9804

How to horizontally center inner div inside an outer div?

I need to center a div horizontally inside another div

Here's my HTML code:

<div id="outer" class="outerDiv">
    <div id="inner" class="innerDiv">
    </div>
</div>

Here's the css :

.outerDiv {
    width:100px;
    height:100px;
    background:red;
}

.innerDiv {
    width:50px;
    height:50px;
    background:blue; 
    // what to add here ?
}

You may try it: http://jsfiddle.net/nggSG/

How may I horizontally center the blue div inside the red div ?

Upvotes: 0

Views: 942

Answers (4)

Dipak Mahajan
Dipak Mahajan

Reputation: 291

Here is my HTML

<div id="outer" class="outerDiv">
    <div id="inner" class="innerDiv">
      Inner div (centered)
    </div>
</div>

simple css

    .outerDiv{
        width:100%;
        margin:0 auto;
        text-align: center;
        background-color: red;
    }

    .innerDiv{
        width:50%;
        display: inline-block;
        background-color: yellow;
        color: black;
    }

Upvotes: 0

NetOperator Wibby
NetOperator Wibby

Reputation: 1414

Here's what you need to do:

.outerDiv {
    width: 100px; height: 100px;

    background-color: red;
    position: relative;
}

.innerDiv {
    width: 50px; height: 50px;
    top: 25px; left: 25px;

    background: blue;
    position: absolute;
}

If you subtract the width and height of the outer div from the inner div and divide by 2, you know how much you need to move over the inner div. Also, the outer div must be position: relative and the inner div must be position: absolute.

If you need a more dynamic centering solution, I've been using Midway.js by Shipp Co (http://shipp.co/midway). Hope this helped!

EDIT: jsFiddle - http://jsfiddle.net/5A9sq

Upvotes: 0

majk86
majk86

Reputation: 125

.innerDiv {
    margin: auto;
    width:50px;
    height:50px;
    background:blue;
}

Centers div horizontally

Upvotes: 2

Laurent S.
Laurent S.

Reputation: 6947

like this :

.innerDiv {
    width:50px;
    height:50px;
    background:blue;
    margin : 0 auto;
   }

Upvotes: 2

Related Questions