Images are not Centralised (Just)

Question

(Edit: I'm new to coding, so my apologies for stupid mistakes)

I can't find any errors in my coding, but my images are positioned slightly off-centre, to the right :( The images have been entered using a list format, but I'll just copy one image and then the relevant CSS:

<nav>
    <ul>
        <li>
            <a href="Images/mountains.jpg" target="new"><img src="Images/mountains.jpg" alt="Mountains"></a>
        </li>
    </ul>
</nav>

(Updated) CSS:

li {
    text-align: center;
    margin: 0 0 40px;
}

I cant find what's wrong :( Is it possible that my table is out of line? (Reference image in comments)

Where is the `nav` element? Also, `position: center` is not valid css. — Bruno Henrique, Aug 19 '15 at 15:03
I just added it in, I had it in the original HTML but didn't include it in the question. I didn't realise the position bit wasn't valid, what would be the alternative? — Chris Hazell, Aug 19 '15 at 15:07
Take a look at this answer: http://stackoverflow.com/questions/7055393/center-image-using-text-align-center , see if it helps. Also, The first answer from http://stackoverflow.com/questions/14774074/center-my-image-inside-ul-li-div will probably work for you, though — Bruno Henrique, Aug 19 '15 at 15:10

score 0 · Answer 1 · answered Aug 19 '15 at 15:18

0

As stated in the commemt position: center; is not valid css.

To align to the center, give your li elements a text-align a center like:

li {
    text-align: center;
}

answered Aug 19 '15 at 15:18

Sukrit

308
2
12

It has "centralised" the image, so that may not be the thing that is off centre, it may be the table that I have above (I would post a screenshot but I don't have the points to do that ;-;) – Chris Hazell Aug 19 '15 at 15:20
Can you post a fiddle or bin with a valid img url? – Sukrit Aug 19 '15 at 15:20
http://i.imgur.com/EsUTwZA.png Here is the URL for a screenshot I took of the page – Chris Hazell Aug 19 '15 at 15:22

score 0 · Answer 2 · answered Aug 19 '15 at 16:08

0

Figured it out!

My ul element had some default padding, so I removed all padding in my universal selector.

answered Aug 19 '15 at 16:08

Chris Hazell

17
3

score 0 · Accepted Answer · answered Aug 19 '15 at 18:07

0

My ul element had some default padding, so I removed all padding in my universal selector.

It's always best practice to use reset css or normalize and then style your elements as per your need.

answered Aug 19 '15 at 18:07

radiant

142
2
9

Images are not Centralised (Just)

3 Answers3