CODEWITHSUNDEEP
htmlcss
Josh Hadik
Josh Hadik

Reputation: 433

centering group of divs

Basically I have 5 circles set up to align themselves in a 'W', but I need help setting the W up so that it is in the center of the page. Right now it is a little to the right. heres my css

.wrapper {
 text-align: center;
}

.circlewrap {
 display: inline-block;
 vertical-align: top;
 width: 20%;
 margin-right: 5%;
 margin-left: 5%;
} 

.circle {
 background-color: white;
 border-radius: 50%;
 border: 5px solid black;
 width :250px;
 height: 250px;
}

and here is my html 

<div class = "wrapper">

  <div class = "circlewrap">
    <div class = "circle"> </div>
  </div>

  <div class="circlewrap">
    <div class = "circle"> </div>
  </div>

  <div class="circlewrap">
    <div class = "circle"> </div>
  </div>

  <div class = "circlewrap">
    <div class = "circle"> </div>
  </div>

  <div class = "circlewrap">
    <div class = "circle"> </div>
  </div>
</div>

Upvotes: 0

Views: 62

Answers (2)

Wandile
Wandile

Reputation: 174

you need to give your wrapper a width then set the margin left and right to auto. i have done the example here http://jsfiddle.net/Wandile/Lyypuf94/

.wrapper {
  text-align: center;
  width: 1100px;
  margin: 0 auto;
}

Upvotes: 1

Claudiu Creanga
Claudiu Creanga

Reputation: 8366

You need to specify a width for your wrapper and then margin: 0 auto;

#wrapper{width:40%, margin:0 auto;} //the width will be that of the content of the div

Upvotes: 0

Related Questions