2016-05-15 52 views
0

我無法在頁面中心呈現我的div(水平)。我曾嘗試將CS​​S設置爲「margin:auto」,但仍然無法正確顯示。通過css呈現爲表格的居中div

這裏是我的CSS:

.pbtable 
{ 
    display:table; 
    margin: auto 0; 
    width:500px; 
} 
.pbrow 
{ 
    display:table-row; 
} 
.pbcell 
{ 
    display:table-cell; 

} 

這裏是我的html:

<body> 
     <?php echo $menu;?> 

     <br/><br/><br/> 
     <div class="pbdtable"> 
      <div class="pbrow"> 
       <div class="pbcell"> 
        <img src="/images/forevents/mcdougall.jpg" height="200px"/> 
       </div> 
       <div class="pbcell"> 
        <img src="/images/forevents/targetJoAnn.jpg" height="200px"/> 
       </div> 
      </div> 
      <div class="pbrow"> 
       <div class="pbcell"> 
        Dr. John McDougall 
       </div> 
       <div class="pbcell"> 
        JoAnne Farb 
       </div>  
      </div> 
     </div> 
    </body> 

兩個圖像出現在最左邊的畫面,我想他們居中。

回答

1

問題1:錯誤的類名

在你的CSS它是寫.pbtable但在HTML它pbdtable

問題2:您需要的margins到在左側和右側分別爲auto,你寫了auto 0而不是0 auto

最終正確的代碼:

.pbtable { 
 
    display: table; 
 
    margin: 0 auto; 
 
    width: 500px; 
 
} 
 
.pbrow { 
 
    display: table-row; 
 
} 
 
.pbcell { 
 
    display: table-cell; 
 
}
<div class="pbtable"> 
 
    <div class="pbrow"> 
 
    <div class="pbcell"> 
 
     <img src="https://placehold.it/200/200" height="200px"> 
 
    </div> 
 
    <div class="pbcell"> 
 
     <img src="https://placehold.it/200/200" height="200px"> 
 
    </div> 
 
    </div> 
 
    <div class="pbrow"> 
 
    <div class="pbcell"> 
 
     Dr. John McDougall 
 
    </div> 
 
    <div class="pbcell"> 
 
     JoAnne Farb 
 
    </div> 
 
    </div> 
 
</div>

的jsfiddle:https://jsfiddle.net/azizn/Lfh0hg7o/

+0

是的先生!這就對了!謝謝! – Matthew

1

您需要.pbtable元素上的position: relative(以及在其父元素上)margin: 0 auto來進行居中。

增加:有在你的代碼的兩個錯誤:

1)這是margin: 0 auto,不margin: auto 0

2)你必須在你的類表中的一個錯字:「pbdtable」與「 pbtable」

下面是與工作解決方案codepen:http://codepen.io/anon/pen/EKJJvz

+0

我試過了,它似乎並沒有工作。我添加了位置元素並更改了邊距,但它仍然不居中。 – Matthew

+0

我只是嘗試圍繞與

標籤的divs,似乎工作...似乎會有一個css的方式 – Matthew

+0

請看我更新的答案加上工作codepen – Johannes

0

圖像只需對準中心。

.pbrow { 
    display: table-row; 
    text-align: center; 
} 

Fiddle