我可以用CSS居中边框吗？

Question

我试图用CSS水平居中虚线.目前,它出现在底部.有没有办法可以用-5px或其他东西抵消它？

HTML

<div class="divider"></div>

CSS

.divider {
    background: aqua url("styles/images/divider-stars.png") no-repeat center 0;
    height:30px;
    padding-bottom: 10px;
    width: 100%;
    margin: 20px auto;
    float: left;
    border-bottom: 2px dotted #b38b0d;
    }

Answer 1

没有.但是你可以创建另一个元素,并在border其中移动它.divider

HTML

<div class="divider">
    <div class="inner"></div>
</div>

CSS

.inner {
 margin-top:19px;
 border-bottom: 2px dotted #b38b0d;   
}

演示: http ://jsfiddle.net/5xMG7/

Answer 2

您还可以使用:before或:after伪选择器来摆脱内部元素。

<div class="divider"></div>

.divider {
    background: aqua url("styles/images/divider-stars.png") no-repeat center 0;
    height: 30px;
    padding-bottom: 10px;
    width: 100%;
    margin: 20px auto;
    float: left;
}

.divider:after {
    content: '';
    display: block;
    margin-top: 19px;
    border-bottom: 2px dotted #b38b0d;
}

http://jsfiddle.net/5xMG7/540/