ansaurus

Question

Answer 1

+2 A:

The better practice is to center the text one element at a time, rather than at the body level.

<html>
<body>
<div style="margin:0 auto;width:800px;">
<h4 style="text-align:center">Welcome</h4>
<ul>
    <li>List item</li>
    <li>List item</li>
</ul>
</div>
</body>
</html>

Not only does this give you far better control of your layout, it will also allow you to ONLY center things that you want to.

After seeing your code below, remove the text-align: center; in the #body tag, this should help alleviate the list icons sticking to the left.

Tom Anderson 2009-07-04 21:12:41

Hmm that KIND of works... The problem now is that all the text is on the right-inside of the white box. i want ALL the text to be centered. Any ideas?

Daniel Kindler 2009-07-04 21:43:22

and i also need the "Site Map" to be directly UNDER the "Welcome"

Daniel Kindler 2009-07-04 21:45:05

Putting it directly under the welcome is just a matter of setting the line-height on the h4 element, as well as the padding/margin.

Tom Anderson 2009-07-04 22:00:35

Answer 2

+1 A:

I believe you want to set the text-indent property, and probably adjust the margins and padding as well.

From the looks of your screenshot though, you're missing some fundamental understanding of HTML. You would have to be doing something wacky to display the bullets like that.

Post the code and I can give a better explanation.

Andrew Johnson 2009-07-04 21:15:48

Answer 3

A:

Try putting the list in a container div, and using the margin-left/right: auto trick. I'd avoid centering a list, since it ruins the organization of the content.

<div style="width: auto; margin-left: auto; margin-right: auto;">
[your list here]
</div>

thezachperson31 2009-07-04 21:18:25

Answer 4

A:

Just an fyi... you can actually style the element. Personally, I'd narrow that down and center it. You also want to avoid doing text-align: center on all elements; i.e, you probably want something like the following...

<style type="text/css">
    html { text-align: center; }
    body { width: 960px; margin: 0 auto; }
    li { text-align: left; }
</style>

Ryan McGrath 2009-07-04 21:39:48

thats good, but the thing is the list is on the left. I need the whole list, including the dots and numbers to be in the center

Daniel Kindler 2009-07-04 21:54:22

Answer 5

+1 A:

The problem is that you are centring the list elements (text) but not the list itself. If you would inspect the elements with e.g. Firebug then you would see the real size of each element. And then you will realize why it is centred like this.

I recommend you to read this tutorial about lists.

Raffael Luthiger 2009-07-04 21:51:17

Answer 6

+2 A:

I'm assuming that when you say you want the list centered, what you actually want is to center the bounding box around the list. Using the table display mode on it and setting auto margins works for everything except for IE. For the sake of IE, you instead have to set a width on the list.

Another thing that should be fixed is the way that you're building the list. The only elements that should appear inside of an ul element are li elements. In other words, the ol's should appear inside of the li's.

Here it is all put together:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
  <head>
    <style type="text/css">
      h1, h3 { text-align: center; }
      ul { margin-left: auto; margin-right: auto; width: 100px; }
    </style>
  </head>
  <body>
    <h1 id="welcome_sign">Welcome!</h1>
    <h3 id="sitemap">Site Map</h3>
    <ul>
        <li>
          Animals
          <ol>
            <li>Hello</li>
          </ol>
        </li>
        <li>
          Machines
          <ol>
            <li>Products</li>
            <li>Report</li>
            <li>Robot</li>
            <li>Show</li>
          </ol>
        </li>
    </ul>  
  </body>
</html>

Jacob 2009-07-05 07:14:23

THANK YOU! It works :p

Daniel Kindler 2009-07-05 07:17:37

ansaurus

tags:

views:

answers:

HTML/CSS Formating question

related questions