Question

I am trying to make the posts within #post-area align center instead of left. I have tried to adjust the float:left; on the .type-post to margin:0 auto; without any response.

HTML:

<div id="post-area">
        <div id="post-24" class="post-24 post type-post status-publish format-standard hentry category-portfolio">
                  <div class="gridly-image"><a href="#"><img width="310" height="221" src="#" class="attachment-summary-image wp-post-image" alt="#" title="#"/></a></div>
          <div class="gridly-category"><p><a href="#" title="View all posts in Portfolio" rel="category tag">Portfolio</a></p></div>

                            <div class="gridly-copy"><h2><a href="#">#</a></h2>
                <p class="gridly-date">February 23, 2012  </p>



               <p class="gridly-link"><a href="#">View more &rarr;</a></p>
         </div>
       </div>

CSS:

/* post and page styles */ 
  .type-post                { width:770px; background:#FFF; border-right:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; margin-right:10px; margin-top:15px; display:inline;}
  .type-page                { width:770px; background:#FFF; border-right:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; margin-right:10px; margin-top:15px; display:inline; float:left; }
  .type-attachment          { width:770px; background:#FFF; border-right:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; margin-right:10px; margin-top:15px; display:inline; float:left; }
  .gridly-image             { z-index:5; }
  .gridly-category          { position:absolute; width:auto; background:#8f4988; margin-top:-35px; z-index:10;  height:30px; overflow:hidden;}
  .gridly-category p        { margin:0; padding:0; line-height:30px; padding-left:20px; padding-right:40px; color:#fff;}
  .gridly-category a        { color:#fff; font-style:italic;}
  .gridly-category a:hover  { color:#555;}
  .gridly-copy              { width:710px; margin-left:auto; margin-right:auto; margin-top:20px; margin-bottom:20px; overflow:hidden; }
  .gridly-date              { width:150px;  color:#8e8e8e; font-size:11px;}
  .size-full                { width:100%; height:inherit;}

/* post index styles */ 
  #post-area                            {margin:0 0 0 15px;}
  #post-area .post                      { width:310px; background:#FFF; border-bottom-right-radius:5px; border-bottom-left-radius:5px; margin:15px 15px 15px auto; position:relative;  }
  #post-area .post .gridly-copy         { width:250px; margin-left:auto; margin-right:auto; margin-top:10px; margin-bottom:20px; overflow:hidden; clear:both;}
  #post-area .post .gridly-copy  h2     { font-size:14px;}
  #post-area .post .gridly-date         { width:150px;  color:#8e8e8e; font-size:11px;  border-bottom:1px dotted #cccccc; padding-bottom:0; padding-top:0; }
  #post-area .post .gridly-link         { width:150px; border-top:1px dotted #e8e8e8; color:#494e51;}
  #post-area .post .gridly-image img    { border-top-right-radius:5px; border-top-left-radius:5px;}

Answer 1

Change .type-post{display:inline} to .type-post{margin:0 auto} removing display:inline.