CODEWITHSUNDEEP
css
J82
J82

Reputation: 8457

How would I horizontally center this ul inside this div?

JSFiddle

HTML

<div id="geometric-nav" class="left template-column cfix    template-column-2" sort_key="nav">

<div class="geometric-nav-wrap cfix" style="
">
  <ul id="geometric-nav-links" class="nav-links expandable">
    <!-- page links are appended to this element -->
  <li class="page page-896547 page-work" page_id="896547" nav-link="true" nav_link_tmpl="true" style="display: none;">

  <div class="nav-link-container">
  <a href="/896547/gallery" class="nav-link visited selected">Gallery</a></div></li><li class="page page-896549 page-custom first-child" page_id="896549" nav-link="true" nav_link_tmpl="true">

  <div class="nav-link-container">
  <a href="/896549/about" class="nav-link visited">About</a></div></li><li class="page page-896548 page-custom last-child" page_id="896548" nav-link="true" nav_link_tmpl="true">

  <div class="nav-link-container">
  <a href="/896548/contact" class="nav-link">Contact</a></div></li><li class="page page-896551 page-resume" page_id="896551" nav-link="true" nav_link_tmpl="true" style="display: none;">

  <div class="nav-link-container">
  <a href="/896551/resume" class="nav-link">Resume</a></div></li></ul>
</div> <!--#geometric-nav-wrap-->
</div>

CSS

#geometric-nav {
    background: #222;
    height: 40px;
    width: 100%;
    margin-top: 10px;
}

.template-column-2 #geometric-nav-links li {
    margin-left: 15px;
    float: left;
    list-style: none;
}

Upvotes: 0

Views: 63

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105873

You can use :table; for ul and reset margin to auto; it will shrink on it's content and will center: 

.template-column-2 #geometric-nav-links {
    display:table;
    margin:auto;
}

DEMO

Or set display:inline-block to li and text-align:center to ul

DEMO 2 

.template-column-2 #geometric-nav-links li {
    margin-left: 15px;
    display:inline-block;
    list-style: none;
}
.template-column-2 #geometric-nav-links {
    text-align:center;
}

Or set display:inline-block to ul and text-align:center to #geometric-nav.

DEMO 3 

#geometric-nav {
    background: #222;
    height: 40px;
    width: 100%;
    margin-top: 10px;
    text-align:center;
}
.template-column-2 #geometric-nav-links li {
    margin-left: 15px;
    float: left;
    list-style: none;
}
.template-column-2 #geometric-nav-links {
    display:inline-block;
}

Upvotes: 2

Haroldchen
Haroldchen

Reputation: 199

This solution treats the li items as inline-block elements and uses the ul container to center the elements.

added: text-align: center to #geometric-nav

and display: inline-block to .template-column-2 #geometric-nav-links li

http://jsfiddle.net/gZB6Y/

google would have helped you ;)

Upvotes: 2

Related Questions