CODEWITHSUNDEEP
htmlcsshtml-lists
Stiller Eugen
Stiller Eugen

Reputation: 701

<ul> centered horizontally inside a div-container

I would like to centered the ul-list inside the div-container. My Code:

<div class="subnav_wines">
    <ul>
        <li><a href="?sel_regio=4">ToBeDefined</a>
        </li>
        <li><a href="?sel_regio=2">Valpollicella</a>
        </li>
        <li><a href="?sel_regio=1">Veneto</a>
        </li>
        <li id="dd_sort" class="last"><a id="" href="#">Sorted by</a>
        </li>
    </ul>
    <div style="clear:both"></div>
</div>

And the CSS:

.subnav_wines {
    border-bottom: 1px solid #b58150;
    padding: 0;
    margin-bottom: 0px;
}
.subnav_wines ul {
    padding: 0;
    margin: 0;
    text-align: center;
}
.subnav_wines li {
    float:left;
    padding: 10px 25px 10px 25px;
    margin: 0;
}
.subnav_wines li.last {
    border-right: 0;
    padding: 0;
}
.subnav_wines li a {
    text-transform: uppercase;
    color: #b58150;
    text-decoration: none;
}
.subnav_wines li a:hover {
    border-bottom: 1px solid #b58150;
}
.subnav_wines li a.active {
    border-bottom: 1px solid #b58150;
}

Can anyone help me?

Thanks.

Upvotes: 0

Views: 53

Answers (3)

Renjith
Renjith

Reputation: 216

hi try the below code for ul

    .subnav_wines { border-bottom: 1px solid #b58150; padding: 0; margin-bottom: 0px; text-align:center}
    .subnav_wines ul { padding: 0; display:inline-block; }

working example : http://jsfiddle.net/zQTD3/

Upvotes: 0

Chankey Pathak
Chankey Pathak

Reputation: 21666

Add the below to your CSS

.subnav_wines {
    text-align: center;
}
.subnav_wines ul {
    display: inline-block;
}

Demo

Upvotes: 0

James
James

Reputation: 4580

The float:left for .subnav_wines li is pushing the list items to the left of its parent ul. Try removing the float:left for .subnav_wines li and add display:inline-block;

.subnav_wines li  { 
  display:inline-block; 
  padding: 10px 25px 10px 25px;  
  margin: 0; 
}

DEMO

Upvotes: 1

Related Questions