|
Тема
|
Вертикално центриране на текст?
|
|
Автор |
Дaвaщия и взимaщия (Добре познат.) |
Публикувано | 08.01.12 22:26 |
|
Здравейте,
имам едно хоризонтално меню и в него има връзки, които са inline и не са оградени в нищо, освен в самото меню. Искам връзките да са центрирани вертикално в менюто.
За целта пробвах да им задам line-height равен на височината на менюто, но тъпото е, че по този начин се появяват две зони под и над връзката, върху които като сложиш показалеца на мишката, връзката става hover, въпреки че реално мишката не е върху текста на връзката. На долната картинка съм маркирал тези зони със светлооранжево.
Как да ги центрирам вертикално по някакъв друг начин, като имайте предвид, че височината на връзките може да е варира, поради което отпада вариантът с margin-top и други подобни.
------------------------------------------
| |
|
Не ми стана много ясно какво искаш да постигнеш като краен резултат.
Сложил си картинка за която получавам следното съобщение:
Предупреждение: Нещо тук не е наред!
design.linkos.bg съдържа зловреден софтуер. Компютърът ви може да се зарази с вирус, ако посетите този сайт.
Google откри, че е възможно на компютъра ви да бъде инсталиран злонамерен софтуер, ако продължите. Ако сте посещавали този сайт или му имате доверие, е възможно наскоро да е бил компрометиран от хакер. Не бива да продължавате, вместо това опитайте отново утре например или отидете на друго място.
Вече уведомихме design.linkos.bg, че открихме зловреден софтуер на сайта.
| |
|
Всеки линк трябва да е увит в DIV. Можеш да си поиграеш с CSS-a
<div style="display:table-cell; vertical-align:middle;">
<a href="...">qwr</a>
</div>
| |
|
Еми не знам, постнал съм нормална картинка.
------------------------------------------
| |
|
Е, то може и всичкити връзки да са в един такъв DIV, а не всяка поотделно, ама лошото в случая е, че тоя display:table-cell; не се поддържа добре.
Аз си мислех да задам line-height на менюто, който да е равен на височината му. След това да сложа връзките в DIV, който е inline-block и е с vertical-align: middle;.
Обаче преди да пробвам това, трябва да се снабдя с дрога (двойно кафе + цигари).
------------------------------------------
| |
|
Ааа, хванах му цаката. Тоя шит с hover-а, се получава само ако връзките са inline-block.
Лошото е, че под IE7 ако връзките не са inline-block, не приемат margin, ама ще измисля нещо.
------------------------------------------
| |
|
Ако не те затруднява, моля те постни решението и се обоснови защо така си постъпил.
| |
|
| |
|
Тоя метод явно също е добър, но той може да се използва ако искаш да центрираш няколко реда текст, докато аз искам да центрирам само един ред и това с line-height е по-добро, защото е много по-просто.
------------------------------------------
| |
|
Ми то няма какво да поствам. Просто бях задал на връзките да са display: inline-block; и затова се получаваше тоя бъг. Като махнах това CSS свойство, и се оправиха.
------------------------------------------
| |
|
|
|
|