How to center content inside jCarousel slider on every resolution

162 views Asked by At

I'm using jCarousel to implement a horizontal slide navigation website. This is my page structure.

<div id="content" class="main">
        <div class="jcarousel">
            <ul>
                <li id="area-1">(CONTENTE HERE)</li>
                <li id="area-2">(CONTENTE HERE)</li>
                <li id="area-3">(CONTENTE HERE)</li>
            </ul>
        </div>
</div>

I'm having trouble horizontally centering the content of each area on the page. It seems to work if the width of the area is the same as the screen resolution, but I can't work with fixed widths since I need it to be centered on any resolution. This is the CSS I have right now:

.jcarousel {
    position: relative;
    text-align: center;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel li {
    float: left;
    width: 1349px;
}

This only works if the resolution is 1366*768 PX.

0

There are 0 answers