CODEWITHSUNDEEP
htmlcss
Jeiman
Jeiman

Reputation: 1181

Center a div that contains another div with inline-block

How do i center a main DIV, within which contains another div that has an inline-block.

<div class="newdiv>
    <a href="http://www.twitter.com" target="_blank"><div class="pinterest-hover social-slide"></div></a>
    <a href="http://www.twitter.com" target="_blank"><div class="instagram-hover social-slide"></div></a>
    <a href="http://www.twitter.com" target="_blank"><div class="reddit-hover social-slide"></div></a>
    <a href="http://www.twitter.com" target="_blank"><div class="rss-hover social-slide"></div></a>
</div>

CSS:

.stumbleupon-hover {
    background-image: url('icons/stumbleupon-hover.png');
}

.social-slide {
    height: 48px;
    width: 48px;
    border:3px solid;
    /*margin: 10px;*/
    display:inline-block;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

.social-slide:hover {
    background-position: 0px -48px;
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3)
    /*box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.8);*/
}

div.newdiv {
    margin: 0 auto 0 auto;
}

Basically I want to center the social icons via newdiv JSFiddle: http://jsfiddle.net/uWaPy/

Upvotes: 0

Views: 95

Answers (4)

david
david

Reputation: 3228

div.newdiv {
    margin: 0 auto;
    text-align: center;
    width: 1000px;
}

just edit this code. And in your div tag, it should be <div class="newdiv">

Upvotes: 0

jono
jono

Reputation: 1842

add text-align:center; to div.newdiv

Also you are missing a " in your html. 

<div class="newdiv>

should be:

<div class="newdiv">

Upvotes: 0

soyuka
soyuka

Reputation: 9105

Use :

div.new-div {
    text-align:center;
}

You had a missing " in the div.new-div.

See updated fiddle.

IE < 8 doesn't like inline-block, there's a hack :

.social-slide {
    display:inline-block;
    *display:inline;
    *zoom:1;
}

Upvotes: 1

Sasidharan
Sasidharan

Reputation: 3750

.newdiv 
{
margin-left: auto;
margin-right: auto;
width:900px;
}

Upvotes: 0

Related Questions