zurb foundation 4: Bullets won't center align in Chrome and IE9/IE10

zurb-foundation

Solution

I have bullets (UL mostly) at a lot of places. However, When I use text-align: center for any text with a bulleted list, the normal text and the list text is center aligned, but the bullets themselves (square, disc and so on) are not.

You need to set the `list-style-position` of your `ul`, that by default has a value of `outside`. It means that the bullets will be outside the content flow (read more about it here).

To solve your issue you can do this:

ul.square {
    list-style-position: inside;
    list-style-type: square;          
    text-align:center;
}

But hang on that will NOT totally solve your issue, I think, because if you have different length of texts in your `ul` then everything will be centered. That means they will not be aligned and it will not look good. Look at the first slide on this fiddle to see what I mean.

To have it centered and make it look good you can do the following:

.container {
    float:right;
    position:relative;
    right:50%;
    background-color:lightgreen;
}
.inner-container {
    float:left;
    position:relative;
    left:50%;
    background-color:lightyellow;
}
ul.square {  
    list-style-type: square;              
    width:300px;
}

<div> /* the wrapper div */
    <div class="container"> /* outer container to offset by 50% */
        <div class="inner-container"> /* inner container to make it center */
            <ul class="square">
                <li>First Item</li>
                <li>Second Item, this is a longer text</li>
            </ul>
        </div>
    </div>
</div>   

The working sample is on slide 2 of the sampled jsfiddle. I included a background color so you can better see how it works.

Problem

Original source