Center ul in container

HTML & CSS
1

Hi all

I have a jsfiddle here - http://jsfiddle.net/dpynebnf/

Super simple, I’m just trying to center the ul in it’s conatiner.

I don’t want to use text-align: center; becasue I still want the text left aligned but I want the whole block centered


<div class="container">

    <div class="row">

            <div class="col-sm-12 col">


                <ul>
        
                    <li>
                        <h3>Sone Title</h3>
                        <p>Some text some text some text some text some text some text </p>
                    </li>

        
                    <li>
                        <h3>Sone Title</h3>
                        <p>Some text some text some text some text some text some text </p>
                    </li>

        
                    <li>
                        <h3>Sone Title</h3>
                        <p>Some text some text some text some text some text some text </p>
                    </li>

        
                    <li>
                        <h3>Sone Title</h3>
                        <p>Some text some text some text some text some text some text </p>
                    </li>

        
                </ul>

            </div>

        <!--<div class="col-sm-1"></div>-->

    </div>

</div>
2

Instead of display:inline-block on the <ul>, give it display:table :slight_smile:

3

Or display: block. You’ll probably want to specify a width in either case to control how wide you want it to display.

4

No you are better without a width and using display:inline-block or display:table. In that way you cater for browser variances in the width of text (specifically in mobile). :smile:

You could have just added text-align:left to the ul to reset the text. The text-align:center on the parent would have centred the block.

Ryan’s display:table method is better though because table can be centred with margin:auto even when they have no width.

5

Agreed. Only reason I suggested a width was display: block just took up a larger width than display:table

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.