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

Home Forums CSS How to center align tabs in html

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #45392

    I have a blog and I cannot center align the tabs. Right now the are all aligned on the left.
    Can you show me how to fix this?

    Here is the html tabs section:

    /* Tabs


    .tabs-outer {

    overflow: hidden;

    position: relative; margin-left: auto; margin-right: auto;

    #layout .tabs-outer {

    overflow: visible;

    .tabs-cap-top, .tabs-cap-bottom {

    position: absolute;

    width: 100%;

    border-top: 1px solid #f1f1f1;

    .tabs-cap-bottom {

    bottom: 0;
    .tabs-inner .widget li a {

    display: inline-block;
    margin: 0;

    padding: .6em 0.75em;

    font: normal bold 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif;

    color: #000000;

    border-top: 0px solid #f1f1f1;

    border-bottom: 0px solid #f1f1f1;

    border-left: 0px solid #f1f1f1;

    .tabs-inner .widget li:last-child a {

    border-right: 0px solid #f1f1f1;

    .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {

    background: #0074f6 url( repeat-x scroll 0 -100px;

    color: #ffffff;



    Please create this in Codepen so we can give it a proper look.


    I had a similar problem a couple of days ago. This discussion (and codepen) may help:

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.