Вертикално центриране на текст?

G

gLaVoReZa

Registered
Здравейте,

имам едно навигационно меню, което е високо 50 пиксела и в него има връзки, които искам да центрирам вертикално. Като им задам line-height да е колкото височината на цялото меню, се центрират перфектно, ама тъпото е, че като сложиш мишката върху менюто, под някоя връзка, връзката става hover, въпреки че мишката реално не е върху самия текст на връзката, а под нея, но броузърът го отчита, че е върху връзката, защото нали връзката става висока колкото цялото меню. Така че този вариант отпада.

Трябва ми някакъв прост и лесен вариант за центриране на текста, като имайте предвид, че не знам каква ще е височината на текста, защото шрифтът ще може да се сменя.
 
Може ли да дадеш снимка защото аз не разбрах. Незнам другите, но поне аз не те разбрах.
 
610013.gif


Значи на това меню например, искам да му центрирам връзките вертикално... както са на картинката, но аз разбира се искам да ги центрирам с HTML и CSS, а не с Photoshop.

Принципно на връзките ако не им е зададен margin-top или нещо подобно, те излизат най-отгоре на менюто (оранжевото). Ако им задам line-height равен на височината на цялото меню, връзките се центрират вертикално и застават така като са на картинката, но проблемът е, че когато поставя показалеца на мишката някъде в зоната оцветена в светлооранжево, връзката става "hover", без мишката реално да е върху текста на дадената връзка.

А, аз искам да са центрирани, но чрез метода с line-height, който описах по-горе, а с някакъв друг метод.
 
С line-height може да се получи, просто виж да нямаш някъде на ul li a display:block; махни го.

edit/
Махаш display:block ако го имаш на
ul li a{
display:block
}

След това на hover ефекта го слагаш.
ul li a:hover{
display:block;
background-color: yellow;
}
 
@lub4o, връзките не са в UL, а просто са в самия DIV и освен тях няма нищо друго. Има само margin за да се раздалечат така.

@Radko, това беше първото, което ми хрумна, но проблемът е, че шрифтът на връзките ще може да се сменя, което означава, че ако се избере някакъв по-голям шрифт, връзките ще слязат по-надолу и няма да са посредата. С line-height са посредата, независимо от шрифта, но както споменах под и над връзката се образува една зона, в която като сложиш мишката и браузъра прави връзката hover.
 
Няма код. Това оранжевото е един DIV, и в него са връзките една до друга, без да са оградени или разделени с нищо.
 
Ми тоя шит с hover-а се получава само ако връзките са inline-block. Лошото е, че ако не са inline-block, IE7 не приема margin, ама това ще го оправя лесно. :)

Благодаря за мненията.
 
lub4o каза:
С line-height може да се получи, просто виж да нямаш някъде на ul li a display:block; махни го.

edit/
Махаш display:block ако го имаш на
ul li a{
display:block
}

След това на hover ефекта го слагаш.
ul li a:hover{
display:block;
background-color: yellow;
}
Увеличете...
:D
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе