Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

List Alignment in DIV

8:33 pm on Jun 25, 2014 (gmt 0)

5+ Year Member

Hello guys,

Part of my HTML code is below. The paragraph displays just well, aligned from the left. However, the LI content automatically aligns to the center. The CSS code is much further below.

What do I need to do to have the LI content align to the left? I would like to create menu's of these.

Will appreciate your advise.

<div id="leftMenu">
<li><a href="#">Free SMS</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">Disclaimer</a></li>
<li><a href="#">Exemptions</a></li>

<p>Let me see where this will show. Well, looks like it has displayed in the correct way and without padding.
</div><!--End of LeftMenu DIV-->

width: 130px;
background-color: grey;
height: 400px;
float: clear;
margin-top: 39px;
margin-left: 0px;

#leftMenu ul li
list-style: none;
border-bottom: 2px solid black;
background-color: yellow;
border-left: 0px;
text-align: left;


9:04 pm on Jun 25, 2014 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

What do I need to do to have the LI content align to the left?

At times like this it's very useful to open the page in any browser with an Inspector feature (exact name and location will depend on the browser). So instead of fine-tooth-combing your whole css to see where the elusive {text-align: center;} is coming from, just home right in on the element and it will tell you what part of the CSS is being invoked.

Centering isn't the default position for any aspect of a list, so it's got to be in the CSS somewhere. For example, you might have a navigation element inside a header, which happens to say
#header * {text-align: center;}

because you were thinking everything in the header should be centered. I'm just making that up, but it's the likeliest explanation.
9:08 pm on Jun 25, 2014 (gmt 0)

Are you trying to clear the padding of the list? The list actually isn't centered, it just appears that way because of the default padding and width of the containing element.

#leftMenu ul {
padding: 0;
9:15 pm on Jun 25, 2014 (gmt 0)

5+ Year Member

Hello lucy24, thank you for the insight.

@brandozz, thank you too.

I changed the padding as advised and it positioned just how I wanted it.

Thank you guys.