Próbuję wyśrodkować przerywaną linię poziomo za pomocą CSS. W tej chwili pojawia się na dole. Czy jest sposób, aby zrównoważyć to z -5px czy coś takiego?

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;
    }
13
Rob 26 lipiec 2011, 18:18
Twój problem jest trochę niejasny. Jeśli ma już 100% szerokości, dlaczego trzeba go wyśrodkować?
 – 
hughes
26 lipiec 2011, 18:34

3 odpowiedzi

Najlepsza odpowiedź

Nie. Ale możesz utworzyć inny element, który ma border i przenieść go w obrębie .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/

17
Sotiris 26 lipiec 2011, 18:29

Możesz także użyć pseudoselektorów :before lub :after, aby pozbyć się wewnętrznego elementu.

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

5
gyo 21 maj 2015, 13:00

Jeśli masz na myśli wyśrodkowanie go w pionie, możesz to zrobić w następujący sposób:

<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 26 lipiec 2011, 18:38