Forum PHP.pl > [HTML][CSS]Jak wyśrodkować w pionie tekst lub grafikę w divie?

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS]Jak wyśrodkować w pionie tekst lub grafikę w divie?

cent4

7.08.2010, 21:39:45

Witam.

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

css:

[HTML] pobierz, plaintext 
#DOL {
    margin      : auto;         /* wycentrowanie calej strony */
    width       : 900px;       /* szerokość */
    height      : 40px;
    float       : left;
	background  : #03205B;
	font-size   : 14px;
    color       : #FFFFFF;
    vertical-align: middle;
}
[HTML] pobierz, plaintext

html:

[HTML] pobierz, plaintext 
<div id="DOL">
	       <CENTER>
                tekst
            </CENTER>
</div>
[HTML] pobierz, plaintext

coomler

7.08.2010, 21:44:17

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.

everth

7.08.2010, 21:59:32

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

flashdev

7.08.2010, 22:27:31

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 
<style>
body	{
	color: #030
	margin: 0;
	padding: 0;
}
div	{
	width: 440px;
	height: 290px;
	position: absolute;
	top:50%;
	left:50%;
}
form	{
	background: #dfd;
	border: 1px solid #0a0;
	width: 400px;
	height: 250px;
	padding: 20px;
	position: absolute;
	bottom: 50%;
	right: 50%;
}
</style>
</head>
<body>
<div>
<form action="" method="post">
...
</form>
</div>
[HTML] pobierz, plaintext

cent4

7.08.2010, 22:30:11

oby dwie powyższe metody niestety nie działają :-(

flashdev

7.08.2010, 22:31:32

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?

everth

7.08.2010, 22:46:02

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.

Pilsener

7.08.2010, 23:29:49

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.

skarabe.pl

8.08.2010, 08:30:50

Jeżeli jest tylko jedna linia tekstu i/lub obrazków to może pomóc line-height: 40px (wysokość diva) + vertical-align: middle.

cent4

8.08.2010, 09:05:26

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 :-(

skarabe.pl

8.08.2010, 09:23:22

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 
<div style="height: 80px; line-height: 80px; vertical-align: middle; border: 1px solid #000">
     ABC
</div>
[HTML] pobierz, plaintext

flashdev

8.08.2010, 11:06:55

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?

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.