通過css呈現爲表格的居中div

我無法在頁面中心呈現我的div（水平）。我曾嘗試將CSS設置爲「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>

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

來源

2016-05-15 Matthew

問題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/

來源

2016-05-15 21:56:23 Aziz

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

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

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

1）這是margin: 0 auto，不margin: auto 0

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

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

來源

2016-05-15 21:41:34 Johannes

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

我只是嘗試圍繞與

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

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

圖像只需對準中心。

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

Fiddle

來源

2016-05-15 21:49:13 aifrim

通過css呈現爲表格的居中div

回答

相關問題