css center text vertical and horizontal, dynamic wp button WordPress
- SOLVED
I have trouble to center align text (horisontal and vertical) on the dynamic navigation buttons. The buttons have set with and height that makes the button to have single or double line of text. I want the text center align either if there is single or double-row of text.
Right know I have "sheated" styled the buttons with double line of text with "top-margin" manually (see css declaration below),
#access li#menu-item-21 a {
margin-top:3px; line-height:1.2em; height:27px;
}
But I dont want to set specific css declaration on the button with 2 rows of text.. I want to set same #access a styling for all the buttons..Is that possible to achive this look?
link to my page http://djbaba.se/navTest/
Should be a better way to solve that.
http://awesomescreenshot.com/0081s4rc8b
Answers (3)
Giri answers:
Try this code
#access a {
color: #FFFFFF;
display: table-cell;
height: 27px;
line-height: 1.2em;
padding: 0;
text-align: center;
text-decoration: none;
vertical-align: middle;
width: 75px;
}
Giri comments:
Don't forget to remove your existing code
#access li#menu-item-21 a {
margin-top:3px; line-height:1.2em; height:27px;
}
Maggy Tanky comments:
Thanx! looks fine on computer screen..but on iphone not so good..
Maggy Tanky comments:
I want to have same width and heigt on iPhone screen..
Giri comments:
Can you take a snapshot of your iphone view?
Maggy Tanky comments:
http://djbaba.se/bild99.PNG
Giri comments:
I checked your website. But i'm not seeing my code in your stylesheet. Did you change it? If yes can you keep that code until I debug it?
Maggy Tanky comments:
Yes it´s done..
Giri comments:
Ok I checked your code. Try this
Replace
line-height: 1.2em;
with
line-height: 10px;
By the way, I have no idea why your iphone screen nav text looks different. If you are gonna use 3 lines text in your menu, then you may have to increase the height from 27px to 36px;
Giri comments:
Most probably its HEIGHT issue. So just play with the height.
Maggy Tanky comments:
ok, thanks!
Maggy Tanky comments:
but how do I pay you on the site? i´m new to this..
Giri comments:
http://blog.tailormadeanswers.com/2011/04/22/voting-assign-prize-money/
Arnav Joy answers:
try this
#access a {
color: #fff;
display: block;
line-height: 27px;
padding: 0;
text-decoration: none;
height: 27px;}
#access .menu-header li, div.menu li {min-width:75px;}
in style.css me line no 89
Balanean Corneliu answers:
Try to search in the style.css if find some line #access ...mobile or something like that , you need to change that to have the same results on the mobile phone.