How to Center Bullet Points in HTML

Zeeshan Afridi Feb 02, 2024

HTML HTML List

HTML Styles of Bullet Points
Center Bullet Points in HTML
Conclusion

Bullet lists are used to create lists of related items in HTML and can be used to create outlines and menus or lists of related items. Each list item starts with a <li> tag.

The list items are held in a <ul> (unordered/bulleted list) or <ol> (ordered/numbered list) tag. This article will teach us the different bullet point styles and how to center bullet points in HTML.

HTML Styles of Bullet Points

In HTML, a bullet point can be created using the <ul> (unordered list) tag, and to style it, and we use the list-style-type attribute. The list-style-type attribute specifies the type of marker for the list and can have the following values.

disc - A solid disc (default)
circle - A hollow circle
square - A filled square
none - No marker (useful for creating nested lists)

Disc – A Solid Disc (Default)

To create a bullet point list, create an <ul> element, and set the list-style-type attribute to the desired value.

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Circle – A Hollow Circle

You can create hollow circle bullet points by the following code.

Code:

<h2>Unordered List with Circle Bullets</h2>

<ul style="list-style-type: circle;">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

Square – A Filled Square

You can create square bullet points by the following code.

<p>The list of developed countries :</p>

<ul style="list-style-type: square;">
    <li>US</li>
    <li>Australia</li>
    <li>New Zealand</li>
</ul>

None – No Marker

There is the following code for the none bullet points list.

<ul style="list-style-type: none;">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>

Center Bullet Points in HTML

Code Example:

<!DOCTYPE html>
<head>
    <style>
        .parent {
            text-align: center;
        }
        .parent > ul {
            display: inline-block;
        }
    </style>
</head>

<body>
    <h1>Center Bullet Points in HTML</h1>
    <div class="parent">
       <ul>
            <li>one</li>
            <li>two</li>
            <li>three</li>
       </ul>
       <br>
       <ul style="list-style-type: circle;">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
      </ul>
      <br>
      <ul style="list-style-type: square;">
            <li>US</li>
            <li>Australia</li>
            <li>New Zealand</li>
      </ul>

    </div>
</body>

Conclusion

Bullet points are centered in HTML using CSS and JavaScript. A list of bullet points can be made in HTML using tags.

HTML offers a few different ways to create bullet points, and the most typical way is to use the unordered list element. This element will make a bullet point for each list item, and you can also use the ordered list element to create numbered bullet points.

Author: Zeeshan Afridi

Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.