css - 居中内联表有问题

Question

我有两个小问题让我抓狂。

1) 如果您访问我的网站，Stork ，您可以看到显示其工作原理的 3 个步骤和页脚处的 3 个问题左对齐。我希望它们在页面上居中，但我一定错过了一些东西，因为 ma​​rgin: auto; 不工作。 你能帮我把它们居中吗？

这是步骤的 HTML 和 CSS:

<div class="panel">
<div class="title">Step 1: Schedule</div>
<div class="steps">

<p>Schedule a pick up and dropoff with our easy form and let us take care of the rest.</p>

</div>
</div>

.panel {
display: inline-table;
margin: 0 auto;
padding: 50px;
width:200px;
height: 180px;
line-height: 1.5;
}

对于问题:

<div class="cbox">
<div class="ctitle">How Can I Pay?</div>
<div class="cblurb">
<p>Full payments can be made upon delivery using credit cards only.</p>
</div>
</div>  

.cbox {
display: inline-table;
margin: 50px auto;
padding: 50px;
width:200px;
height: 100px;
line-height: 1.5;
color: #424242;
margin-top:60px;
}

2) 有一点需要注意，我尝试使用 href="/.contact" 格式将导航栏中的单词与其相关的 div 类连接起来，但我一直收到错误消息。我该如何解决？

谢谢!

Answer 1

添加text-align: center;到 panel的父 div，它应该使您的“内联”元素居中。

如果您不希望面板的内容以这种方式对齐(它们将继承对齐方式)，请添加 text-align: left到面板的样式。

更新

关于你问题的第二部分——你不能只使用它的类链接到一个元素(不是没有 javascript，并且决定返回的集合中的哪个元素是你想要的，因为类不是唯一的)。

安id ，但是，是唯一的，可以与 <a href="#target_id">Link</a> 链接