Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] Tekst do srodka
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
gulldarek
Witam!

Postanowilem przeuczyc sie na XHTML smile.gif , ale juz natrafilem na kilka problemow. Jeden z nich dotyczy wyrownania tekstu do srodka (w html'u wystarczylo zrobic valign="middle") na warstwie. Jak mozna to zrobic w CSS?

Od razu powiem ze na IE 6 nie dziala:

[xml:1:8e6900dd03]vertical-align: middle;[/xml:1:8e6900dd03]

ani tez:

[xml:1:8e6900dd03]text-align: middle;[/xml:1:8e6900dd03]

Bede bardzo wdzieczny za wskazowki smile.gif
Sh4dow
middle?questionmark.gif nie spotkalem sie, ale moze uzyc center, jesli o to chodzi albo justify ?
czachor
Specyfikacja CSS2 przewiduje właśnie umieszczone w stylach
Kod
vertical-align: middle

( http://webmaster.helion.pl/kurshtml/css2/index.htm - Wyrównanie tekstu w pionie)
IE jak zwykle i tego nie akceptuje
gulldarek
Heh, o ile ja posiadam netscape (tez) to wielu internautow nawet nie wie co to jest i strona sie bedzie sypala. Myslalem, ze istnieje jeszcze inne rozwiazanie sad.gif
wassago
defaultowo text w warstwie zawsze jest ustawione na
[xml:1:cb8dda7b3a]vertical-align: middle;[/xml:1:cb8dda7b3a]
jezeli chcesz warstwe (diva) wysrodkowac to
[xml:1:cb8dda7b3a]
<div style='marig-left: auto; margin-right: auto'>tresc</div>
[/xml:1:cb8dda7b3a]
gulldarek
Wassago:

Nie do końca o to mi chodziło. Tzn. dobrze wiedzieć, że vertical-align powinno działać, ale wolałbym poznać sposób jak to zrobić żeby działało w IE 6 snitch.gif .

I mam jeszcze jedno pytanie:

- jak ustawić warstwę na środku strony (dawne <center>) ?

[xml:1:7b6f03afa6]
position: absolute;
left: -HalfXpx;[/xml:1:7b6f03afa6]

Powyższy kod działał do momentu usunięcia tabeli która była pod divem snitch.gif

Jeszcze przy okazji dam kod swojej strony:

[xml:1:7b6f03afa6]<div id="center">
<div id="top">
<div id="top_logo"></div>
<div id="top_image">
<img src="images/webby_03.jpg" border="0" USEMAP="#webby_03_Map" alt="" />
<div id="top_links">Strona Główna :: Rejestracja :: Lista Użytkownikóww :: Wyszukiwarka :: Szybkie linki :: Download</div>
<div id="top_bottom_image"></div>
</div>
</div>
<div id="left_column">
<div id="gradient">Panel Użytkownika</div>
</div>[/xml:1:7b6f03afa6]

[xml:1:7b6f03afa6]BODY{
font-family: tahoma;
font-size: 8pt;
color: #000000;
margin-top: 0;
margin-bottom: 0;
}

#center {
position: absolute;
left: -HalfXpx;
width: 760;
height: 100%;
border-left: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
}

#top
{
width: 760;
text-align: center;
height: 106;
display: inline;
padding: 0;
}

#top_logo
{
background: url('images/webby_02.jpg');
margin-right: 0px;
float: left;
width: 232;
height: 106;
padding: 0;
}

#top_image
{
margin-left: 0px;
float: left;
padding: 0;
}

#top_links
{
background: url('images/webby_05.jpg');
width: 527;
height:17;
text-align: center;
color: #FFFFFF;
margin-left: 0px;
float: left;
padding: 0;
}

#top_bottom_image
{
background: url('images/webby_06.jpg');
width: 527;
height:2;
margin-left: 0px;
float: left;
padding: 0;
}

#left_column
{
font-family: tahoma;
font-size: 9pt;
color: #000000;
margin-right: 0px;
float: left;
width: 232;
padding: 0;
}

#gradient
{
background: url('images/webby_13.jpg');
font-family: tahoma;
font-size: 9pt;
font-weight: bold;
color: #000000;
margin-right: 0px;
float: left;
height: 25;
width: 232;
padding: 0;
}[/xml:1:7b6f03afa6]

Czy moze mi ktos powiedziec czemu lewa kolumna nie przylega bezposrednio do gornej warstwy?
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.