CODEWITHSUNDEEP
htmlcss
JavaFox
JavaFox

Reputation: 63

How do I center my list?

I am trying to center my list and for the life of me cannot figure it out no matter what I try. Obviously I am not trying the right things in the right places. Help and explain what it is I need to do. Thanks!

HTML

            <div id = "listwrapper">
                <h3>Partner Companies</h3>
                <ol id = "list">
                    <li><a href="http://store.steampowered.com/app/241240/">Steam Contraption maker</a></li>
                    <li><a href="https://www.gamingonlinux.com/articles/contraption-maker-casual-game-will-come-to-linux.3026">Contraptions coming to Linux</a></li>
                    <li><a href="unity3d.com/">Unity game developer engine</a></li>
                </ol>
            </div>

And CSS

#listwrapper
{
    margin: auto;
    text-align: center;
}

#list
{
    margin: auto;
}

#list li
{
    display: inline;
}

Upvotes: 0

Views: 76

Answers (3)

M_Griffiths
M_Griffiths

Reputation: 581

margin: auto o; // should centre item
margin-left: auto; // for i.e
margin-right: auto; // for i.e

The above CSS should centre block level elements in all major browsers.

Venter the list as a whole rather than the li they should then remain in the correct order.

Edit For reference the following css should enable the display of the numbers of ordering

li {
        float:left;
        margin:10px;
        list-style-position:inside;
    }

Upvotes: 0

hiew1
hiew1

Reputation: 1434

You need to 'link' your html file with your css file. The way to do this is to add this line into your html file:

<link rel="stylesheet" type="text/css" href="yourcssfilename.css">

Just add it so your whole html file looks like this:

<link rel="stylesheet" type="text/css" href="style.css">

<div id = "listwrapper">
                <h3>Partner Companies</h3>
                <ol id = "list">
                    <li><a href="http://store.steampowered.com/app/241240/">Steam Contraption maker</a></li>
                    <li><a href="https://www.gamingonlinux.com/articles/contraption-maker-casual-game-will-come-to-linux.3026">Contraptions coming to Linux</a></li>
                    <li><a href="unity3d.com/">Unity game developer engine</a></li>
                </ol>
            </div>

I tried your code by just adding that line and it works as shown:

Before:

enter image description here

After:

enter image description here

If you want it to show like this:

enter image description here

Then in your css file, remove this:

#list li
{
    display: inline;
}

Upvotes: 0

Kinga
Kinga

Reputation: 386

You have to reset default list padding added by browsers:

#list
{
    padding-left:0;
}

enter image description here

http://jsfiddle.net/nvuqf7wL/1/

You should choose on of 2 centring methods: -margin:auto; -text-align: center;

First one (margin auto) is better if you can know width of container/list and you don't want centre content of this container. in this particular example this will centre ul but li not.

Second method(text-align) is used if you don't know width of container but if you don't want to centre content of this container you have to reset it to left on child/children.

enter image description here

http://jsfiddle.net/nvuqf7wL/3/

Upvotes: 2

Related Questions