Forums

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

Home Forums CSS Align list to bottom of centered div

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #166474
    matthisco
    Participant

    Hi folks,

    I can get the list to align to the bottom using position absolute, but its stays left aligned, can anyone please help me center this list, can anyone please help?

    CSS:

    .container-full {
    clear: both;
    width: 100%;
    }
    .fixed-centre {
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    width: 960px;
    }
    .main-block {
    height:68px;
    background:#E8729D;
    }
    .sub-block {
    background:#F1ABC5;
    height:36px;
    }
    .tabs {
    list-style: none;
    margin: 0 auto ;
    }
    .tabs li {
    position:absolute;
    bottom: 0;
    }

    HTML:

    <ul class=”tabs fixed-centre”>;
    <li class=”active_on”><a href=”#one”>General</a></li>
    <li><a title=”Coming soon” href=”#”>xx</a></li>
    <li><a title=”Coming soon” href=”#”>xx</a></li>
    <li><a title=”Coming soon” href=”#”>xx</a></li>
    <li><a title=”Coming soon” href=”#”>xx</a></li>
    <li><a title=”Coming soon” href=”#”>xx</a></li>
    </ul>

    #166616
    Paulie_D
    Member

    Could you make a quick Codepen showing your HTML…including the wrapping block and all required CSS.

    This should be simple enough although I’m not a fan of using absolute positioning except as a last resort. I find margins/padding much more flexible in general.

    #166624
    Tom Houy
    Participant

    I often find myself using this technique to center menus, it may work in your situation, but it’s difficult to tell without seeing the whole thing:

    http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

    The site also includes some illustrations explaining how it all works.

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