Menu icon Foundation
How to center text on button groups?

Hey guys.

I just made my first webpage with Dreamweaver and Foundation.
Everything works really great and is easy to use, but there is one problem I cant solve.

I use Foundation because of the great ability to also reach smaller screens with the same page.
On the top of my page is a centered button group. If I test the site on my 4inch Smartphone everything looks pretty awesome except of the text on the buttons on the top. There would be enugh space to show the whole text on each of them but it seems that it doesent center on the buttons itself.

I tried "text-center" but no improvment. I also unsuccessfull googled it.
Is there a way to solve this?

button grouptextcenter

Hey guys.

I just made my first webpage with Dreamweaver and Foundation.
Everything works really great and is easy to use, but there is one problem I cant solve.

I use Foundation because of the great ability to also reach smaller screens with the same page.
On the top of my page is a centered button group. If I test the site on my 4inch Smartphone everything looks pretty awesome except of the text on the buttons on the top. There would be enugh space to show the whole text on each of them but it seems that it doesent center on the buttons itself.

I tried "text-center" but no improvment. I also unsuccessfull googled it.
Is there a way to solve this?

Rafi Benkual over 5 years ago

Can you provide an example so we can help out? I made a codepen if needed that you can modify to show us. http://cdpn.io/ytEAs

Daniel Qureshi over 5 years ago

I tried to modify but just managed to get this:

https://gist.github.com/anonymous/9382208

I hope this clearifies my problem. If you have this button group on a small screen, the buttons become to small for the text. Well, actually they would fit, but the text on them doesent center. It looks like it would center to the middle of the group. Not relative to the center of the button itself.

Thanks for your help!

Daniel Qureshi over 5 years ago

Anyone?

Nick Sporich over 4 years ago

I am encountering the same error. Looks good but text doesn't stay centered as I change the page size.

were you ever able to fix this?

i have been messing with css, but i feel im just complicating things.

Nick Sporich over 4 years ago

I was actually able to get this working by adding the following to my CSS file:

.button-group li a {
    padding-left: 0%;
    padding-right: 0%;
}