Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
[CSS]vertical-align nie działa - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: [CSS]vertical-align nie działa (/thread-css-vertical-align-nie-dziala)

[CSS]vertical-align nie działa - demboo - 19-08-2009

Witam,
tworze menu z przycisków (div):
Kod:
<div class="przycisk"><p class="menu"><span><a class="menu" href="">O MNIE</a></span></p></div>
nadawałem z bezsilności parametr 'vertical-align:middle;' dla <div> <p>, <span> oraz <a> ale w żdanym przypadku tekst nie wyśrodkowuje się względem górnej i dolnej krawędzi, dlaczego ?
Dodam też, że <span> umieszczałem już przed <p> <a> i zupełnie do wewnątrz <span>O MNIE</span>, ale to i tak nic nie dało.
Pozdrawiam

RE: [CSS]vertical-align nie działa - Labsta.com - 19-08-2009

Wyśrodkowujesz menu względem całej strony, czy tekst względem menu?

Wklej też CSS.

RE: [CSS]vertical-align nie działa - demboo - 19-08-2009

Wyśrodkowuję tekst względem diva id=przycisk.
Wklejam całość:
Kod:
* {
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
}

body
{
      background-image  : url("images/tlo.jpg");
      background-repeat : repeat-x;
}

div#glowny
{
      border:0px solid black;
      width:1000px;
      margin: 0 auto;
}

div#head
{
      border:0;
      width:1000px;
      height:327px;
      margin: 0 auto;
      background-image : url("images/head.jpg") ;
}

div#baner
{
position: relative;
top: 55px;
left: 0px;
width:1000px;
height:242px;
}

div#tresc
{
      border:0;
      width:1000px;
      height:200px;
      background-color: white;
}

div#stopka
{
      border:0;
      width:1000px;
      height:118px;
      background-image : url("images/stopka.jpg") ;
}

div#menu
{
margin: 0px 0px 0px 50px;
}

div.przycisk
{
width: 161px;
height: 49px;
background-image: url(images/p_menu.jpg);
float: left;
display: block;
text-align:center;
display: block;
}

p.menu
{
padding-top: 50%px;
text-align: center;
font-family: Times New Roman;
font-weight: bold;
font-size: 15px;
color: #222222;
}

a.menu
{
text-decoration: none;
color: #222222;
}

span
{
}


/* ]]> */
</style>


</head>

<body>

<div id="glowny">
      <div id="head">
            <div id="baner"></div>
      </div>

      <div id="tresc">
            <div id="menu">
                  <div class="przycisk"><p class="menu"><a class="menu" href=""><span>O MNIE</span></a></p></div></div>
                  <div class="przycisk"><p class="menu"><a class="menu" href="">GALERIA I MULTIMEDIA</a></p></div>
                  <div class="przycisk"><p class="menu"><a class="menu" href="">BIURO<br />POSELSKIE</a></p></div>
            </div>
      </div>
      <div id="stopka"></div>
</div>
</body>


RE: [CSS]vertical-align nie działa - Labsta.com - 19-08-2009

Spróbuj dodać do div.przycisk line-height: 49px; taki sobie sposób, ale zwykle daje radę w prostych przypadkach. Jak nie da to może to być winna innych wartości np. padding-top: 50%px; - co to ma być ? Wink

RE: [CSS]vertical-align nie działa - demboo - 19-08-2009

Smile nie, no to -50px to pozostałość po moich próbach znalezienia rozwiązania.
To line-height to jest rozwiązanie, ale:
1. nie w przypadku gdy pozostałe pozycje mają <br> i napisy się rozjeżdżają poza przycisk
2. chciałbym również wiedzieć jak wyśrodkowywać teksty względem górnej i dolnej krawędzi i czy vertical-align jest do tego odpowiedni

Rozwiązanie, które mi podałeś mogłoby być OK, ale jest rozwiązaniem 'na chwilę', nie daje poglądu na ogół sprawy i dlatego błagam dalej o pomoc w znalezieniu jakiegoś uniwersalnego sposobu na wyśrodkowywanie tekstów góra-dół.

RE: [CSS]vertical-align nie działa - Labsta.com - 19-08-2009

Ja zwykle załatwiam to przez padding: (odpowiadnia wartość w px od góry). Możesz też zrobić to przez position:relative;. Wtedy nadaj div.przycisk
Kod:
position:absolute;
Natomiast p.menu
Kod:
position:relative;
top:50%;
margin-top: -(połowa wysokości czcionki)px;

Tak skomplikowane konstrukcje są odpowiednie raczej dla grafiki, a nie tekstu, ale musi zadziałać.

P.S. Ogólnie mocno namieszałeś sobie i w kodzie i w CSS na przyszłość staraj się upraszać, będziesz miał mniej problemów.

RE: [CSS]vertical-align nie działa - demboo - 19-08-2009

Rozumiem te dwa rozwiązania, ale są one odpowiednie tylko wtedy, gdy tekst w przycisku jest w jednej linii i wtedy jasne, tekst bedzie na srodku.

[Obrazek: przyklad.jpg]

Wystarczy, że tekst będzie w dwóch liniach i wtedy już nie jest na środku.
W podobny sposób zadziała rozwiązanie z position: relative;
Interesuje mnie, czy istnieje rozwiązanie bardziej uniwersalne. Takie, które będzie potrafiło wyważyć tekst i umieścić je dokładnie tak, aby między tekstem a górną i dolną krawędzią 'rodzica' było tyle samo px'ów.

RE: [CSS]vertical-align nie działa - Labsta.com - 19-08-2009

No tak...fakt
Poczytaj to http://kurs.browsehappy.pl/CSS/Table i http://kurs.browsehappy.pl/Krok/TabeleCSS innych pomysłów nie mam, ale nic nie podpowiem, bo nie stosuje tego.

RE: [CSS]vertical-align nie działa - demboo - 19-08-2009

Ok, dzięki.
Będę poszukiwał. Może znajdzie się ktoś, kto zna odpowiedź na moje pytanie Smile