Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS]Jak wyśrodkować w pionie tekst lub grafikę w divie?
cent4
post 7.08.2010, 21:39:45
Post #1





Grupa: Zarejestrowani
Postów: 415
Pomógł: 0
Dołączył: 24.12.2008

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

Witam.

Jak wyśrodkować w pionie tekst lub grafikę w divie?

css:
[HTML] pobierz, plaintext 
  1. #DOL {
  2.     margin      : auto;         /* wycentrowanie calej strony */
  3.     width       : 900px;       /* szerokość */
  4.     height      : 40px;
  5.     float       : left;
  6. 	background  : #03205B;
  7. 	font-size   : 14px;
  8.     color       : #FFFFFF;
  9.     vertical-align: middle;
  10. }
[HTML] pobierz, plaintext



html:
[HTML] pobierz, plaintext 
  1. <div id="DOL">
  2. 	       <CENTER>
  3.                 tekst
  4.             </CENTER>
  5. </div>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 11)
coomler
post 7.08.2010, 21:44:17
Post #2





Grupa: Zarejestrowani
Postów: 45
Pomógł: 0
Dołączył: 26.06.2010

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

Jak znasz wysokość obrazka to może coś takiego

Kod
img
{
top: 50%;
margin: -150px 0 0 0;
position: absolute;
}


-150px jest to połowa wysokości obrazka.
Go to the top of the page
+Quote Post
everth
post 7.08.2010, 21:59:32
Post #3





Grupa: Zarejestrowani
Postów: 782
Pomógł: 153
Dołączył: 21.07.2010

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

Jak masz porządnego htmla to możesz spróbować z text-align:center w #DOL lub w samym elemencie IMG.


--------------------
Już mi się ani wiedzieć, ani tym bardziej myśleć nie chce.
[Think different]!
Go to the top of the page
+Quote Post
flashdev
post 7.08.2010, 22:27:31
Post #4





Grupa: Zarejestrowani
Postów: 812
Pomógł: 117
Dołączył: 2.12.2008

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

Cytat(cent4 @ 7.08.2010, 22:39:45 ) *
Witam.

Jak wyśrodkować w pionie tekst lub grafikę w divie?
[...]


Tutaj masz prosty przykład wyśrodkowania formularza w pionie i w poziomie. Zmodyfikuj według swoich potrzeb.

[HTML] pobierz, plaintext 
  1. <style>
  2. body	{
  3. 	color: #030
  4. 	margin: 0;
  5. 	padding: 0;
  6. }
  7. div	{
  8. 	width: 440px;
  9. 	height: 290px;
  10. 	position: absolute;
  11. 	top:50%;
  12. 	left:50%;
  13. }
  14. form	{
  15. 	background: #dfd;
  16. 	border: 1px solid #0a0;
  17. 	width: 400px;
  18. 	height: 250px;
  19. 	padding: 20px;
  20. 	position: absolute;
  21. 	bottom: 50%;
  22. 	right: 50%;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div>
  28. <form action="" method="post">
  29. ...
  30. </form>
  31. </div>
[HTML] pobierz, plaintext


--------------------
generator haseł
Go to the top of the page
+Quote Post
cent4
post 7.08.2010, 22:30:11
Post #5





Grupa: Zarejestrowani
Postów: 415
Pomógł: 0
Dołączył: 24.12.2008

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

oby dwie powyższe metody niestety nie działają :-(
Go to the top of the page
+Quote Post
flashdev
post 7.08.2010, 22:31:32
Post #6





Grupa: Zarejestrowani
Postów: 812
Pomógł: 117
Dołączył: 2.12.2008

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

Cytat(cent4 @ 7.08.2010, 23:30:11 ) *
oby dwie powyższe metody niestety nie działają :-(


To wytłumacz mi dlaczego tuaj powyższy kod radzi sobie znakomicie?


--------------------
generator haseł
Go to the top of the page
+Quote Post
everth
post 7.08.2010, 22:46:02
Post #7





Grupa: Zarejestrowani
Postów: 782
Pomógł: 153
Dołączył: 21.07.2010

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

Cytat
Jak wyśrodkować w pionie tekst lub grafikę w divie?

Jak zwykle nie czytam postów :/. Co do pytania: nie ma łatwej metody, zobacz sobie tutaj.


--------------------
Już mi się ani wiedzieć, ani tym bardziej myśleć nie chce.
[Think different]!
Go to the top of the page
+Quote Post
Pilsener
post 7.08.2010, 23:29:49
Post #8





Grupa: Zarejestrowani
Postów: 1 590
Pomógł: 185
Dołączył: 19.04.2006
Skąd: Gdańsk

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

Cytat
nie ma łatwej metody
- w dobie IE 5.0 i 6.0 tak było, ale teraz chyba display:table i display:table-cell działa bez problemu na nowych exploderach? Dla pojemnika table i jakaś wysokość, dla tego co ma być "środkowane" table-cell i oczywiście magiczne vertical-align:middle.
Go to the top of the page
+Quote Post
skarabe.pl
post 8.08.2010, 08:30:50
Post #9





Grupa: Zarejestrowani
Postów: 142
Pomógł: 49
Dołączył: 29.07.2010

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

Jeżeli jest tylko jedna linia tekstu i/lub obrazków to może pomóc line-height: 40px (wysokość diva) + vertical-align: middle.
Go to the top of the page
+Quote Post
cent4
post 8.08.2010, 09:05:26
Post #10





Grupa: Zarejestrowani
Postów: 415
Pomógł: 0
Dołączył: 24.12.2008

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

Niestety nic nie działa:

skarabe.pl - rozwiązanie z line-height nie działa ;-(

Pilsner - niestety też to nie działa ;-(

everth - niestety jak dajesz link, niech to będzie link aktywny ;-) - nie działa - nie widzi tej strony

flashdev - popracowałem nad tym co napisałeś - jeśli powyrzucam wszystko z tego formularza i zostawię tam tylko jedno słowo - jest ono umieszczone w lewym górnym rogu, a nie na środku w pionie i poziomie :-(
Go to the top of the page
+Quote Post
skarabe.pl
post 8.08.2010, 09:23:22
Post #11





Grupa: Zarejestrowani
Postów: 142
Pomógł: 49
Dołączył: 29.07.2010

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

Cytat(cent4 @ 8.08.2010, 10:05:26 ) *
skarabe.pl - rozwiązanie z line-height nie działa ;-(

A to ciekawe, bo mi działa (border dodany dla lepszej wizualizacji efektu):
[HTML] pobierz, plaintext 
  1. <div style="height: 80px; line-height: 80px; vertical-align: middle; border: 1px solid #000">
  2.      ABC
  3. </div>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
flashdev
post 8.08.2010, 11:06:55
Post #12





Grupa: Zarejestrowani
Postów: 812
Pomógł: 117
Dołączył: 2.12.2008

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

Cytat(cent4 @ 8.08.2010, 10:05:26 ) *
[...]
flashdev - popracowałem nad tym co napisałeś - jeśli powyrzucam wszystko z tego formularza i zostawię tam tylko jedno słowo - jest ono umieszczone w lewym górnym rogu, a nie na środku w pionie i poziomie :-(


Nie wiem czy zauważyłeś, ale to właśnie ten formularz znajduje się w centrum ekranu (<body>).
Zamień sobie <form> na <div>, <img>, czy co tam potrzebujesz i delikatnie zmodyfikuj style.
Czy nie napisałem przypadkiem w pierwszym swoim poście, żebyś przerobił według własnych potrzeb?


--------------------
generator haseł
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 24.07.2025 - 18:35
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn