How to Align a Bullet List in HTML

Written by sara williams
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Align a Bullet List in HTML
Use CSS code to align bulleted lists in HTML. (Jupiterimages/ 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.

Skill level:


  1. 1

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

  2. 2

    Align the text within all bullets by setting "text-align" for your <ul> tag. The <ul> tag wraps around the <li> and </li> tags to define them as part of a single list. When you align text for the <ul> 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.

  3. 3

    Align the entire list to the left or to right of the page by setting "float" for your <ul> tag. When "float" is set to left or right on a <ul> 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.

  4. 4

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



      &lt;li&gt;List Item&lt;/li&gt;
      &lt;li&gt;List Item&lt;/li&gt;



    The <div> tag does not centre anything by itself; you must use CSS to centre everything. Add the following code between your <style> tags or in your CSS file to centre the bulleted list:

    div {display: block; text-align: centre;}

    ul {display: inline-block; text-align: left;}

Tips and warnings

  • Use CSS code on bulleted lists in HTML to create menus. Setting tags to float to the left makes them line up against each other, and setting "list-style" to "none" for the tag makes the bullets disappear. After that, style the bulleted list with colours and spacing to suit the design of your Web page.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.