web-dev-qa-db-ja.com

CSSでボーダーを中央に配置できますか？

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;
    }
cssborder
10
Rob

番号。ただし、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/

13
Sotiris

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

4
gyo

垂直方向に中央揃えにする場合は、次のようにします。

<div class="divider"><span class="line"></span></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;
    }
.line
{
   border-bottom: 2px dotted #b38b0d;
   margin-top:15px;
    display:block;
}
1
David Aleu