我无法在页面中心(水平)渲染我的div。我已尝试将CSS设置为" margin:auto"但仍然无法正确渲染。
这是我的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>
这两个图像显示在屏幕的最左侧,我希望它们居中。
答案 0 :(得分: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
答案 1 :(得分: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;
}
&#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/
答案 2 :(得分:0)