Forum PHP.pl > [CSS] Wyśrodkowanie tekstu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS] Wyśrodkowanie tekstu

Lion_87

1.12.2008, 12:01:16

Witam.

Mam problem bo nie mogę wyśrodkować tekstu. Chodzi mi o tą cześć na samym dole. Lewa strona jest na górze a prawa na dole. Ja chciałbym aby byly oba te teksty buły na środku.

A tak w plikach:

[HTML] pobierz, plaintext 
<div id=\"mydol\">
<div id=\"mydol1\">
<?
...
?>
</div>
<div id=\"mydol2\"><p align=\'center'>
<b><font color=red>MY</font>mes = <?
...
?>
</div>
</div>
[HTML] pobierz, plaintext

Kod

#mydol {
    clear: both;
        width: 700px;
    height: 25px;
    margin-left: auto;
    margin-right: auto;
  }

#mydol1 {
  background: transparent url(redprofil/tlo/mydol01.png) 0 0 no-repeat;
  width: 340px;
  height: 25px;
  float: left;
  }

#mydol2 {
  background: transparent url(redprofil/tlo/mydol02.png) 0 0 no-repeat;
  width: 360px;
  height: 25px;
  float: right;
  }

W jaki sposób wyśrodkować ten tekst?

zaaap

1.12.2008, 12:09:27

A moze

Kod

albo dopisz to w CSSie

wookieb

1.12.2008, 12:14:48

Kod

#mydol1 {
  background: transparent url(redprofil/tlo/mydol01.png) 0 0 no-repeat;
  width: 340px;
  height: 25px;
  float: left;
text-align: right;
  }

#mydol2 {
  background: transparent url(redprofil/tlo/mydol02.png) 0 0 no-repeat;
  width: 360px;
  height: 25px;
  float: right;
text-align: left;
  }

Lion_87

1.12.2008, 12:15:30

Hmmm chodziło mi o uzyskanie takiego efektu

I taki uzyskuje korzystając z <tr>, <td>.... Chciałem się dowiedzieć czy bez tego na samym div da sie zribić?

wookieb

1.12.2008, 12:17:49

Wiec mów ze chodzi o wycentrowanie w pionie...
da się..

Kod

#element
{
display: table-cell;
vertical-align: middle;
}

A tak wogóle to źle dałes diva z float: right;
Powinien być przed tym z float: left;.

Lion_87

1.12.2008, 12:23:35

Teraz to tak wygląda:

Kod

#mydol {
    clear: both;
  width: 700px;
    height: 25px;
    margin-left: auto;
    margin-right: auto;

  }

#mydol1 {
  background: transparent url(redprofil/tlo/mydol01.png) 0 0 no-repeat;
  width: 340px;
  height: 25px;
  float: left;
  display: table-cell;
  vertical-align: middle;
  }

#mydol2 {
  background: transparent url(redprofil/tlo/mydol02.png) 0 0 no-repeat;
  width: 360px;
  height: 25px;
  float: right;
  display: table-cell;
  vertical-align: middle;
  }

wookieb

1.12.2008, 12:26:02

To sprobuje inne wartosci vertical-align. Jak to nie pomoze to dodaj padding-top

Lion_87

1.12.2008, 12:34:01

Super. Tak działa idealnie.

Kod

#mydol {
    clear: both;
  width: 700px;
    height: 25px;
    margin-left: auto;
    margin-right: auto;
  }

#mydol1 {
  background: transparent url(redprofil/tlo/mydol01.png) 0 0 no-repeat;
  width: 340px;
  height: 25px;
  float: left;
  padding-top: 4px;
  }

#mydol2 {
  background: transparent url(redprofil/tlo/mydol02.png) 0 0 no-repeat;
  width: 360px;
  height: 25px;
  float: right;
  padding-top: 4px;
  }

Dzięki wookieb

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.