CODEWITHSUNDEEP
htmlcss
Si8
Si8

Reputation: 9235

How to center the DIV inside another parent DIV

I have the following HTML:

<div class="col span_1_of_3 setCenter">
<div id="divEachImageExt">
    <div id="divEachImage">
        <div id="slides">
            <div class="inta"><img src="theImages/imcpsite.png" width="140" height="140" alt="side" /></div>
        </div>
        <div id="menu">
            <ul class="ulText">
                <li class="menuItem act">PS: BASICS</li>
            </ul>
        </div>
    </div>
</div>
</div>

CSS:

.col {
    /*display: block;*/
    /*float:left;*/
    display: inline-block;
    margin: 1% 0 1% 0;
}
.col:first-child {
    margin-left: 0;
}
.span_1_of_3 {
    width: 32.2%;
}
.setCenter {
    text-align: center;
}
#divEachImageExt {
    float: left;
    width: 30%;
    margin: 0 auto;
}
#divEachImage {
    /* CSS3 Box Shadow */
    -moz-box-shadow:0 0 3px #AAAAAA;
    -webkit-box-shadow:0 0 3px #AAAAAA;
    box-shadow:0 0 3px #AAAAAA;

    /* CSS3 Rounded Corners */

    -moz-border-radius-bottomleft:4px;
    -webkit-border-bottom-left-radius:4px;
    border-bottom-left-radius:4px;

    -moz-border-radius-bottomright:4px;
    -webkit-border-bottom-right-radius:4px;
    border-bottom-right-radius:4px;

    border:1px solid white;

    background:url('../theImages/panel.jpg') repeat-x bottom center #FFFFFF;

    /* The width of the divEachImage */
    width:175px;
    overflow:hidden;
    margin: 0 auto;
}

#slides {
    /* This is the slide area */
    height:155px;

    /* jQuery changes the width later on to the sum of the widths of all the slides. */
    width:175px;
    overflow:hidden;
    margin: 0 auto;
}

.inta {
    float:left;
    width: 175px;
    margin: 0 auto;
    height: 140px;
    padding-top: 8px;
}

#menu {
    /* This is the container for the thumbnails */
    height:45px;
}

ul.ulText {
    margin:0px;
    padding:0px;
}

ul.ulText li {
    /* Every thumbnail is a li element */
    width:125px;
    display:inline-block;
    list-style:none;
    height:45px;
    overflow:hidden;
    line-height: 45px;
    vertical-align: middle;
}

li.inact:hover {
    /* The inactive state, highlighted on mouse over */
    background:url('../theImages/pic_bg.png') repeat;
}
li.act a {
    cursor:default;
}
ul.ulText li a {
    display:block;
    background:url('../theImages/divider.png') no-repeat right;
    height:35px;
    padding-top:10px;
}

What happens is, the inner DIV is left aligned instead of being centered.

Here is a F12 Dev Tool screenshot:

enter image description here

Upvotes: 1

Views: 52

Answers (4)

Sameeraa4ever
Sameeraa4ever

Reputation: 568

change #divEachImageExt to below code

#divEachImageExt {
    width: 30%;
    margin: 0 auto;
}

remove float:left

It will solve your problem.

Upvotes: 0

Saul does Code
Saul does Code

Reputation: 1022

Hey You can Try using the margin to center it like so

.yourstyle {
 margin:0 auto; /* shorthand or margin-left:auto; margin-right:auto; for long way */ 
}

or you could attempt to use CSS3 2D transforms to center it or just Flex box good luck

Upvotes: 1

AVAVT
AVAVT

Reputation: 7143

Is there any reason for the float in #divEachImageExt? If no the either

/* .setCenter part not needed */
#divEachImageExt {
    width: 30%;
    margin: 0 auto;
}

or 

.setCenter {
    text-align: center;
}
#divEachImageExt {
    display: inline-block;
    width: 30%;
}

will do.

Upvotes: 0

bwitkowicz
bwitkowicz

Reputation: 754

Add display: inline-block to an element you want to be centered.

Heres the fiddle for you: http://jsfiddle.net/u26wqssb/

And heres the code:

Sample HTML:

<div class="setCenter">
    <div class="centerMe"></div>
</div>

and CSS:

.setCenter {
    width:100%;
    text-align:center;
    background: #eee;
}

.centerMe {
    width:100px;
    height:100px;
    background:red;
    display:inline-block;
}

If you add a fiddle for your case we can fix it there.

Upvotes: 3

Related Questions