Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Centering Tabs

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #166703
    bodeppen
    Participant

    Hey!
    I was wondering how to center tabs. I’m using WP UI for some tabs, and I’d like to center all four tabs in the center of the box. I can’t figure out what CSS I need.
    Here’s the page:
    http://www.deppenpaddles.com/paddles/stand-up-paddleboard-paddles/lalani-paddle/

    Thanks,

    Bo Deppen

    #166706
    magicspon
    Participant

    Hello..

    .jqui-styles ul.ui-tabs-nav {
    text-align: center;
    }

    .ui-tabs .ui-tabs-nav li {
    display: inline-block; // instead of float: left;
    }

    booom!

    #166721
    bodeppen
    Participant

    Thanks for the reply!
    I added it both to the stylesheet and the plugin’s CSS customize spot but did not notice a change.
    I’m not sure if I was clear, but I want the individual tabs to be centered.
    Thanks so much!

    Bo Deppen

    #166748
    Paulie_D
    Member

    You would also need to diable the floats that are applied by JQuery-UI.css (line 738)

    media="all"
    .ui-tabs .ui-tabs-nav li {
    list-style: none;
    float: left; /* disabled this */
    position: relative;
    top: 0;
    margin: 1px .2em 0 0;
    border-bottom-width: 0;
    padding: 0;
    white-space: nowrap;
    }
    
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.