CSS帖子對齊

我正在嘗試使中的posts對齊而不是左對齊。我試圖調整.type-post上的float:left;至margin:0 auto;而沒有任何迴應。CSS帖子對齊

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;}

來源

2012-02-23 Jess McKenzie

什麼/哪裏是'＃後area'？ – paislee 2012-02-23 23:31:24

變化.TYPE-後{顯示：內聯}到.type-post {margin：0 auto}刪除display：inline。

來源

2012-02-24 00:09:55

不會超過 – 2012-02-24 03:35:22

你只是試圖創建一個寬度爲770px的容器和用容器中心容器？我不清楚你的目標，澄清，我相信我可以提供幫助。 – 2012-02-24 16:39:41

上面的代碼是我的wordpress模板給出的後置區域是容器，而type-post是當前數據左對齊的數據，我試圖將type-post居中。 – 2012-02-25 03:10:54

更換display:block代替display:inline那麼它應該工作

來源

2012-02-23 23:31:53 Dips

什麼行?????? – 2012-02-23 23:38:13

添加到'.type-post' – Dips 2012-02-23 23:39:40

這裏是工作示例http://jsfiddle.net/fBNXC/ – Dips 2012-02-23 23:52:32

文件jquery.masonry.min.js設置

isFitWidth:true

加入CSS

#post-area 
{ 
    margin: 0 auto; 
    width: 100%; 
}

來源

2012-12-17 01:01:11

回答

相關問題