css - 将页面上的 div 居中，在类下方创建随机像素

Question

我不是 CSS 专家，但找到了一个我喜欢的进度跟踪器，但需要它在页面上居中。但是每当我将它居中时，我都会在前两个箭头的底部得到一个随机像素:(见截图)

我希望它以页面为中心，并使用硬编码 380 像素的边距自动。我确定硬编码的 380px 应该不是硬编码的，但“自动”做了同样的事情。

CSS:

div#wizard.wizard
    {
        width: 380px;
        margin-left:auto;
        margin-right:auto;
    }

.wizard a 
    {
        padding: 12px 12px 10px 12px;
        margin-right:5px;
        background:#efefef;
        position:relative;
        display:inline-block;
    }
.wizard a:before
    {
        width:0px;
        height:0px;
        border-top: 20px inset transparent;
        border-bottom: 20px inset transparent;
        border-left: 20px solid #fff;
        position: absolute;
        content: "";
        top: 0; 
        left: 0;
    }
.wizard a:after
    {
        width:0px;
        height:0px;
        border-top: 20px inset transparent;
        border-bottom: 20px inset transparent;
        border-left: 20px solid #efefef;
        position: absolute;
        content: "";
        top: 0;
        right: -20px;
        z-index:2;
    }
.wizard a:first-child:before {border:none;}
.wizard a:last-child:after {border:none;}

.wizard a:first-child
    {
        -moz-border-radius: 4px 0 0 4px;
        -webkit-border-radius: 4px 0 0 4px;
        border-radius:   4px 0 0 4px;
    }
.wizard a:last-child
    {
        -moz-border-radius: 0 4px 4px 0;
        -webkit-border-radius: 0 4px 4px 0;
        border-radius: 0 4px 4px 0;
    }

.wizard .badge {margin:0 5px 0 18px; position:relative; top:-1px;}
.wizard a:first-child .badge {margin-left:0;}

.wizard .current {background:#007ACC; color:#fff;}
.wizard .current:after {border-left-color:#007ACC;}

调用页面:

 <div class="wizard" id="wizard">
    <a class="current"><span class="badge badge-inverse">1</span> Your Information</a>
    <a><span class="badge">2</span> Preview</a>
    <a><span class="badge">3</span> Your Copy</a>
</div>

Answer 1

你为什么要用

.wizard .badge { ... top: -1px; }

也许这就是为什么看起来好像有额外像素的原因。如果将其设置为零会怎样？

添加

.wizard a { height: 18px; }

因为您没有指定确切的高度，虽然两个边框的高度加起来为 40 像素，但按钮的高度可能仍然会有所不同。这是否解决了您的问题？