Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML][CSS] Tekst po środku DIVa
nospor
post
Post #1





Grupa: Moderatorzy
Postów: 36 559
Pomógł: 6315
Dołączył: 27.12.2004




http://jsfiddle.net/VhS98/1/
Jak zrobić by TEXT znajdował się po środku diva? Chodzi o środek vertical a nie o text-align:center. DIv ma wysokość tak jak obrazek tam umieszczony.

Kombinowałem z z różnymi align ale ciągle to samo. Text jest na górze.
Go to the top of the page
+Quote Post
tolomei
post
Post #2





Grupa: Zarejestrowani
Postów: 450
Pomógł: 135
Dołączył: 18.11.2010
Skąd: Wschowa

Ostrzeżenie: (0%)
-----


Podam linki z tego co znalazłem:

http://blog.themeforest.net/tutorials/vert...ering-with-css/
http://www.jakpsatweb.cz/css/css-vertical-...r-solution.html
http://www.student.oulu.fi/~laurirai/www/css/middle/

Do wyboru do koloru.

Pozdro (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
grzes999
post
Post #3





Grupa: Zarejestrowani
Postów: 305
Pomógł: 29
Dołączył: 5.07.2011

Ostrzeżenie: (0%)
-----


A znasz wysokość diva??
Jeśli tak to możesz dać.
line-height:wysokośc diva;
Go to the top of the page
+Quote Post
chemik1982
post
Post #4





Grupa: Zarejestrowani
Postów: 91
Pomógł: 13
Dołączył: 20.03.2007
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----


O to chodzi ?

  1. <div style="height:60px;">
  2. <span style='display:block;float:left;background:url("http://nospor.pl/images/colors.png") left repeat-y;width:20px;height:20px; padding: 20px 0 20px 20px;'> text</span>
  3.  
  4. </div>
Go to the top of the page
+Quote Post
nospor
post
Post #5





Grupa: Moderatorzy
Postów: 36 559
Pomógł: 6315
Dołączył: 27.12.2004




@chemik wizualnie tak, o to chodzi. Ale tekst nie może być w span, tylko poza
Go to the top of the page
+Quote Post
czachor
post
Post #6





Grupa: Zarejestrowani
Postów: 897
Pomógł: 40
Dołączył: 16.12.2003
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


Daj line-height:60px dla diva:
  1. <div style="height:60px;line-height:60px">
  2. <span style='display:block;float:left;background-image:url("http://nospor.pl/images/colors.png");width:20px;height:60px;'></span>
  3. text
  4. </div>
Go to the top of the page
+Quote Post
nospor
post
Post #7





Grupa: Moderatorzy
Postów: 36 559
Pomógł: 6315
Dołączył: 27.12.2004




Tak, line-height jest rozwiązaniem. Czy to też działa pod IE?
Go to the top of the page
+Quote Post
czachor
post
Post #8





Grupa: Zarejestrowani
Postów: 897
Pomógł: 40
Dołączył: 16.12.2003
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


U mnie zawsze działało, z tym, że ja używam cssów z html5boilerplate. Ale powinno działać zawsze, oczywiście nie biorę odpowiedzialności za ie6 (IMG:style_emoticons/default/smile.gif)

BTW - fajny link do sprawdzania różnych cssowych i htmlowych rzeczy pod różnymi przeglądarkami: http://caniuse.com
Go to the top of the page
+Quote Post
Niktoś
post
Post #9





Grupa: Zarejestrowani
Postów: 1 195
Pomógł: 109
Dołączył: 3.11.2011

Ostrzeżenie: (10%)
X----


Wystarczy nadpisać styl-może takie coś:
http://jsfiddle.net/VhS98/4/
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 2.10.2025 - 12:31