How to Align a Bullet List in HTML

Techwalla may earn compensation through affiliate links in this story. Learn more about our affiliate and product review process here.
Use CSS code to align bulleted lists in HTML.

Web designers use bullet lists for more than just adding bullets and text. The HTML tag used to create bullet lists is handy for creating menus or organizing images for a JavaScript to load into a slideshow. Learning to use cascading style sheet code in conjunction with bullet lists -- called "unordered lists" in HTML slang -- will open up several exciting Web-design possibilities.

Advertisement

Step 1

Open your HTML file containing the bulleted list and look between the and tags toward the top of the code. Add tags if they are not already present. If your code includes a tag somewhere after the tag, and that contains a reference to a CSS file, then open up that file instead. Your CSS code goes between the tags or on a new line of your CSS file.

Advertisement

Video of the Day

Step 2

Align the text within all bullets by setting "text-align" for your

    tag. The
      tag wraps around the
    • and
    • tags to define them as part of a single list. When you align text for the
        tag, the alignment affects text in every bullet but does not align the list itself to the left or right of the page. Here is an example of CSS code to set "text-align":

Advertisement

ul {text-align: right;}

Note that the bullets do not move with the the text. The bullets stay to the left in this case.

Step 3

Align the entire list to the left or to right of the page by setting "float" for your

    tag. When "float" is set to left or right on a
      tag, it moves the entire bulleted list to the left or right of the page. Set float like this:

Advertisement

ul {float: right;}

You can set "float" to the left or the right, but not to the center.

Step 4

Wrap your

    tags in
    and
    tags to create a wrapper that will center the bulleted list on your page. Your resulting code will look like this:

Advertisement

  • List Item
  • List Item

The

tag does not center anything by itself; you must use CSS to center everything. Add the following code between your