Question

我无法在页面中心（水平）渲染我的div。我已尝试将CSS设置为＆＃34; margin：auto＆＃34;但仍然无法正确渲染。

这是我的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>

这两个图像显示在屏幕的最左侧，我希望它们居中。

Answer 1

position: relative元素（以及其父元素）上.pbtable需要margin: 0 auto来margin: 0 auto进行居中。

添加：您的代码中存在两个错误：

1。）它是margin: auto 0，而不是rotate_point

2。）你的课堂上有一个拼写错误：＆＃34; pbdtable＆＃34;与＆＃34; pbtable＆＃34;

这是一个包含工作解决方案的codepen：http://codepen.io/anon/pen/EKJJvz

Answer 2

问题1：错误的班级名称

在CSS中，它是.pbtable，但在HTML中pbdtable

问题2：左侧需要margins为auto，您写的是auto 0而不是0 auto。

最终正确的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

jsFiddle：https://jsfiddle.net/azizn/Lfh0hg7o/

Answer 3

只需将图像对齐到中心即可。

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

Fiddle

通过css

3 个答案: