align a horizontals menu li items

Question

I am having real troubles with trying to align a horizontal menu.So far my menu is looking like enter image description here

I have 2 centered elements to make up the menu in the image you can see a gray border (slide-nav class) that has been centered within the page. Now I am trying to do the same for the menu

I have had to hard code the li widths but ideally I would like them to fit automatically. Is it possible without javascript to align the menu items in the center?

My html

   <nav class="slide-nav">
            <ul class="slider">
                <li class="selected">
                    <div>
                        <span class="heart"></span>
                        <div>
                            Get Started</div>
                    </div>
                </li>
                <li>
                    <div>
                        <span class="price-tag"></span>
                        <div>
                            Get Results</div>
                    </div>
                </li>
                <li>
                    <div>
                        <span class="star"></span>
                        <div>
                            Track & Engage</div>
                    </div>
                </li>
                <li>
                    <div>
                        <span class="people"></span>
                        <div>
                            Features</div>
                    </div>
                </li>
            </ul>
        </nav>

css

.slide-nav
{
border-bottom: solid 1px #f2f2f2;
margin: 0 auto;
width: 856px;
}
.slider
{
list-style: none;
height: 38px; 
margin: 0 auto;
width: 722px;
}
.slider li
{
border-bottom: solid 7px transparent;
cursor: pointer;

display: inline-block;
width: 150px;
}
.slider li div 
{
line-height: 31px; 
}
.slider li div div 
{
text-indent: 6px;
}
.slider li.selected > div
{
border-bottom: solid 7px #592970;

}

Please provide us an example via http://jsfiddle.net. – Sampson May 29 '12 at 06:06 — Sampson, May 29 '12 at 06:06

MusikAnimal · Answer 1 · 2012-05-29T06:19:36.850

0

I just got rid of the widths, removed margin: 0 auto from .slider and added the ole text-align: center.

Check out a live demo: http://jsfiddle.net/RJL7J/

Hope this helps.

edited May 29 '12 at 06:19

answered May 29 '12 at 06:12

MusikAnimal

2,286
2
22
28

score 0 · Answer 2 · edited May 23 '17 at 12:01

0

I believe this has been answered in detail here.

Basically you want to have your individual buttons rendered with display:inline-block which would allow for them to be justified. There's a trick however with adding a "dummy" line break to force justification.

edited May 23 '17 at 12:01

Community

1
1

answered May 29 '12 at 06:13

Oleg

24,465
8
61
91

score 0 · Accepted Answer · answered May 29 '12 at 06:22

Here the CSS that u have to change with

.slide-nav
{
border-bottom: solid 1px #f2f2f2;
margin: 0 auto;
width: 856px;
text-align:center;
}
.slider
{
list-style: none;
height: 38px; 
margin: 0;
padding: 0;
}
.slider li
{
border-bottom: solid 7px transparent;
cursor: pointer;
display: inline-block;
padding:0 10px;
}

align a horizontals menu li items

3 Answers3