Horizontally centred tabs

[Chris99Participant]

Hello,

Is it possible to have horizontal tabs centered rather than left aligned?

I am trying to imitate an iOS segmented control, but centering the tabs by overriding the mobile theme CSS has so far eluded me.

Cheers,

Chris

[DimitarParticipant]

Hello Chris,

You can do this by increasing the left margin of the first tab, e.g.: https://www.jseditor.io/?key=horizontally-centred-tabs.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Chris99Participant]

Thanks for replying Dimitar.

Perhaps I should have mentioned earlier, my DIV that contains the UL has a width of 100% as the PhoneGap app I am writing is designed to support multiple resolutions. As I don’t necessarily know the width or the number of tabs until run time I was hoping for a CSS based ‘one size fit all’ solution.

Cheers,

Chris

[DimitarParticipant]

Hi Chris,

Unfortunately, there is no such solution. You would have to dynamically calculate and apply the required margin-left value to the first tab.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Chris99Participant]

Okay, thanks Dimitar.

I was hoping to avoid JavaScript as I would have to consider changes in phone orientation.

On the plus side I doubled the number of tabs in your example and set scrollPosition to ‘both’, and was pleased to see that shifting the tabs still leaves the tab scrolling image on the right visible.

Thanks again,

Chris

[Author]

Posts