CODEWITHSUNDEEP
css
Chris Paterson
Chris Paterson

Reputation: 1149

Trouble centering a div within another div

I have a div that needs to be centered horizontally inside another div. The problem is that the inner div is almost centered - i.e., it is centered but with a left margin/padding (I can't determine which) of about 5-10px. How can I make the inner div centered within the outer div?

HTML:

<div class="outer">
    <div class="inner">
        // stuff
    </div>
</div>

CSS:

.outer {
    position:relative;
    display:inline-block;
    width:100%;
}

.inner {
    position:relative;
    padding:10px;
    width:200px;
    height:200px;
}

Upvotes: 0

Views: 62

Answers (5)

Jeff
Jeff

Reputation: 1800

you could do something like this:

#parent {
  display: table-cell;
  width: 300px;
  height: 300px;
  vertical-align: middle;
  text-align: center;
    border: 1px solid black;
}

#child {
    display: inline-block;
    width:100px;
    height: 100px;
    border: 1px solid black;
}

here's a fiddle: http://jsfiddle.net/De36Y/

Upvotes: 1

user3002989
user3002989

Reputation:

How about this code?

.inner {
position:relative;
padding:10px;
width:200px;
height:200px;
/* included */
left:50%;
margin-left:-100px;}

Upvotes: 0

CRABOLO
CRABOLO

Reputation: 8793

You could do this

.outer {
    position:relative;
    display:inline-block;
    width:100%;
    text-align: center;
}

.inner {
    position:relative;
    display: inline-block;
    padding:10px;
    width:200px;
    height:200px;
}

Upvotes: 0

mumush
mumush

Reputation: 670

On .inner use:

width: 50%; margin: 0 auto;

Upvotes: 0

vishnu
vishnu

Reputation: 740

I would try to make the inner div have a position: absolute, then set margin equally like the following:

CSS:

.outer {
    position:relative;
    display:inline-block;
    width:100%;
}

.inner {
    position: absolute;
    margin-left: auto;
    margin-right: auto
    width:200px;
    height:200px;
}

Upvotes: 0

Related Questions