Close up of computer code on a screen

Centring your unordered list with an unknown width

Posted 11 Jan 2019
Share this article:

Ever struggled to position your unordered list in the centre with HTML and CSS. Struggle no more…

So you need to build that footer menu on your website and have it neatly centre aligned. Work out the width of the menu in pixels, add that to your <ul> tag in your CSS files and set the margin-left and margin-right to auto. Easy right? But what happens if you can’t determine the width of the menu because the menu items can be renamed, added or removed by the client? This code will centre your unordered list regardless of the width.

The HTML:

<div class=”container”>
<div class=”ul-container”>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul> </div>
<div class=”clearfix”></div>
</div>


CSS

.ul-container {
float:right;
position: relative;
left: -50%;
}

ul { position: relative;
left: 50%;
list-style: none;
}

.clearfix {
clear: both;
}

Essentially, the float: right in the container pushes the ul-container <div> contents to the right hand side of the container <div>. The left: -50% adjusts the ul-container <div>  back across so the right-hand edge of the ul-container <div> is exactly at the 50% mark of the container <div>. The left: 50%positions the left-hand edge of the <ul> at the 50% mark of the ul-container <div>. Both position: relative attributes link the ul-container <div> and the <ul> to each other and the clear:both kills the float:right attribute.

Bang! Right in the centre. Try it yourself.

Recent articles

Repairs by Post business cards, letterhead, compliment slip stationery

Rebranding RPB: the watch repair experts

Providing marketing material and stationery for the watch repair experts.

07 Oct 2020
Minimalist Premier League football club crests

Introducing Sport Social football news website

How we transformed audio-format Premier League news and updates into an online platform for fans.

29 Sep 2020
GDI Services website

New site for vehicle diagnostics company

We launch a new website for vehicle diagnostics experts GDI Services

29 May 2020
Paddy Power jigsaw

Lockdown promo puzzle design for Paddy Power

Fat Heads recreate some of football’s funniest moments for Paddy Power’s jigsaw giveaway.

12 May 2020