[CSS] Wyśrodkowanie tekstu Opcje

[Lion_87]

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?

Ten post edytował Lion_87 1.12.2008, 12:06:26

[zaaap]

A moze

Kod

<div id="mydol2" style="margin-left:auto; margin-right:auto;">

albo dopisz to w CSSie

[wookieb]

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]

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]

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]

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]

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

[Lion_87]

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