przelewowy zarówno w lewo i prawo

Jak wyśrodkować tekst z CSS więc przelewa zarówno w lewo i prawo? Widzę pytania tutaj dokonać przelewu tekst lewo zamiast z prawej strony, ale chcę, żeby wyglądać jak tekst zostanie powiększonyprzelewowy zarówno w lewo i prawo

<body> 
    <div class="page"> 
     SOMEHEADER 
    </div> 
</body>

.page { 
    overflow:hidden; 
    width:70%; 
    text-align:center; 
    margin:0 auto; 
    font-size:8em; 
    word-wrap:none; 
}

Oto fiddle z demo o czym mówię.

Źródło

2012-12-24 mehulkar

Zobacz ten Demo: http://jsfiddle.net/QZCuY/3/ Przetestowałem go w najnowszym Chrome, FF i IE7-9

HTML (<div class="text"> dodanej):

<div class="page"> 
    <div class="text"> 
     SOMEHEADER 
    </div> 
</div> 
<p> 
    How do I get the header to overflow left <u>and</u> right instead of just to the right? 
</p>

CSS (.page ma dwie nowe właściwości i nowy Klasa .text):

body { 
    background-color:green; 
} 
.page { 
    position:relative; 
    height:1em; 

    overflow:hidden; 
    background-color:red; 
    width:70%; 
    text-align:center; 
    margin:0 auto; 
    font-size:8em; 
    word-wrap:none; 
} 
p { 
    width:70%; 
    margin:50px auto 0; 
    text-align:center; 
    font-size:2em; 
} 

.text { 
    position:absolute; 
    right:-50%; 
    left:-50%; 
}

Źródło

2012-12-24 10:54:59

Nie jest to najbardziej eleganckie rozwiązanie, ale wygląda na to, że działa.

HTML:

<div class="page"> 
    <div> 
     SOMEHEADER 
    </div> 
</div>

CSS:

.page > div { 
    margin: 0 -1000%; 
}

Przykład: http://jsfiddle.net/grc4/w36mX/

Metoda ta działa poprzez rozciąganie wewnętrzną div takie, że jest wystarczająco szeroka, aby dopasować swoją zawartość w całości (bez zawijanie/przepełnienie). Zawartość jest następnie wyśrodkowana (text-align: center) i przycięta na wymiar przez zewnętrzny element div (overflow: hidden).

Najtrudniejsze jest, aby wewnętrzna div wystarczająco szeroka, aby zmieścić tekst. Kiedy nie jest wystarczająco szeroki, tekst przepełni się w prawo, aby nie był prawidłowo wycentrowany (jak widać w oryginalnym jsFiddle).

Korzystając negative margins można rozciągnąć element przez pewien okres zarówno po lewej i prawej stronie. Jeśli wiesz, że rozmiar tekstu wynosi na przykład 400 pikseli, możesz użyć margin: 0 -200px, aby zapewnić, że wewnętrzny element div ma zawsze szerokość co najmniej 400 pikseli (200 pikseli w lewo i 200 pikseli w prawo). Jeśli nie znasz dokładnego rozmiaru tekstu, możesz użyć wartości procentowych lub naprawdę wysokiej wartości px.

-1 rozciągnął element div o 100% jego pierwotnego rozmiaru w lewo, a 100% ponownie w prawo, co spowodowało, że był on trzykrotnie większy niż element div o wartości .page. Tekst ma około 900 pikseli szerokości, więc ta metoda przestałaby działać, gdyby element .page div był poniżej szerokości 300 pikseli (spróbuj zmienić rozmiar przeglądarki w jsFiddle za pomocą margin: 0 -100%, aby zobaczyć, co mam na myśli).

margin: 0 -1000% rozciąga div Żeby było 21 razy większe, co jest zwykle na tyle, aby dopasować tekst.

Źródło

2012-12-24 10:56:11 grc

+1 naprawdę prostsze rozwiązanie niż kopalni –

to działa świetnie. Czy możesz wyjaśnić, dlaczego to działa? '-1000%' czego? Również "-100%" wydaje się działać tak samo? – mehulkar

Dodałem wyjaśnienie. – grc

przelewowy zarówno w lewo i prawo

Odpowiedz

Powiązane problemy