CODEWITHSUNDEEP
cssborder
Rob
Rob

Reputation: 1495

Can I center a border with CSS?

I'm trying to center the dotted line horizontally with CSS. At the moment, it appears at the bottom. Is there a way I can offset it with -5px or something?

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;
    }

Upvotes: 16

Views: 121296

Answers (3)

gyo
gyo

Reputation: 1701

You could also use :before or :after pseudo-selectors, to get rid of the inner element.

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

Upvotes: 6

David Aleu
David Aleu

Reputation: 3942

If you mean center it vertically, one way you can do it is like this:

<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;
}

Upvotes: 1

Sotiris
Sotiris

Reputation: 40066

no. But you can create another element that have the border and move it within the .divider

html

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

css

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

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

Upvotes: 20

Related Questions