How to Align a Bullet List in HTML

Written by sara williams | 13/05/2017
How to Align a Bullet List in HTML
Use CSS code to align bulleted lists in HTML. (Jupiterimages/Photos.com/Getty Images)

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 organising images for a JavaScript to load into a slideshow. Learning to use Cascading Style Sheet (CSS) code in conjunction with bullet lists -- called "unordered lists" in HTML slang -- will open up numerous Web-design possibilities. Alignment of unordered lists is an important skill to master.

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.

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":

        ul {text-align: right;}

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

        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:

            ul {float: right;}

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

            Wrap your

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

              The

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