Zaloguj się

demboo · (Ten post był ostatnio modyfikowany: 19-08-2009, 19:03 przez demboo.)

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> , oraz <a> ale w żdanym przypadku tekst nie wyśrodkowuje się względem górnej i dolnej krawędzi, dlaczego ?
Dodam też, że umieszczałem już przed <a> i zupełnie do wewnątrz O MNIE, ale to i tak nic nie dało.
Pozdrawiam

**Labsta.com** · 19-08-2009, 21:04

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

Wklej też CSS.

demboo · (Ten post był ostatnio modyfikowany: 19-08-2009, 21:31 przez demboo.)

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>

**Labsta.com** · (Ten post był ostatnio modyfikowany: 19-08-2009, 21:40 przez Labsta.com.)

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

demboo · (Ten post był ostatnio modyfikowany: 19-08-2009, 21:49 przez demboo.)

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ą 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ół.

**Labsta.com** · (Ten post był ostatnio modyfikowany: 19-08-2009, 21:56 przez Labsta.com.)

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.

demboo · (Ten post był ostatnio modyfikowany: 19-08-2009, 22:23 przez demboo.)

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.

**Labsta.com** · 19-08-2009, 22:30

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.

demboo · 19-08-2009, 23:27

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

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie