Most designers know about lists and occasionally want to center them, but when we apply center (style="text-align: center;"), the list does indeed centers but so do all the <li> items so the list will display as below.

• Electrician in Kent
• Electrician in Canterbury
• Electrician in Dover
• Electrician in Ashford

Solution

Now to those in the know there are some easy solutions to get the the list centered without loosing the left align of the <li> items, just like the examples below.

Table Method (Prefered Option)

This method is by far the easiest. The display: table; (Centered Table / Center Table) option treats the <ul> as a table. This has the affect of allowing it to be centered. This is not the same as display: block; as this method does not work.

<ul style="display: table; margin: 0 auto;">
    <li>Electrician in Kent</li>
    <li>Electrician in Canterbury</li>
    <li>Electrician in Dover</li>
    <li>Electrician in Ashford</li>
</ul>

• Electrician in Kent
• Electrician in Canterbury
• Electrician in Dover
• Electrician in Ashford

Static Width Method

This method requires you to set a fixed width for the <ul>. This has the downfall that you must figure out what size you want the <ul>, but you can use other width descriptors not just px. You should note that if you make the width too small the <li> items will span lines and if you make the width too large you will get whitespace. A width must be set otherwise the centering will not work.

<ul style="width: 165px; margin: 0 auto;">
    <li>Electrician in Kent</li>
    <li>Electrician in Canterbury</li>
    <li>Electrician in Dover</li>
    <li>Electrician in Ashford</li>
</ul>

• Electrician in Kent
• Electrician in Canterbury
• Electrician in Dover
• Electrician in Ashford

Further Notes

If you want to get rid of the left-side padding, thus genuinely centering the list, add to the <ul>

ul {padding-left: 0;}

If you want to remove the bullet points

ul {list-style: none;}