Center ul between floats in container - html

Question

I want to center a ul between a float left and float right. They are inside a container which is with a fixed width and is also centered.
<header>
<div class="conatiner">
<div class="left"><img></div>
<div class="right"><img></idv>
<ul class="center">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<header>
I want them to look like this:
[ [[logo] [Item 1 Item 2 Item 3] [options]] ]
My css is something like this:
header {
width: 100%;
}
.container {
max-width: 1200px;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
text-align: center;
}
However the .center ul is centered between the .left and .right and because .left has a larger width than .right it gets shifted a little to the right. What I want to achieve is to make it centered no matter how big .left and .right are.

Answer 1

In this case you can use position: absolute on ul and transform: translateX(-50%) to center.
With position: absolute you remove ul from elements flow so width of images doesn't affect position of ul and it will always stay in center of window.
header {
width: 100%;
position: relative;
}
.container {
max-width: 1200px;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
text-align: center;
padding: 0;
position: absolute;
margin: 0;
left: 50%;
top: 0;
transform: translateX(-50%);
}
<header>
<div class="conatiner">
<div class="left"><img src="" alt="Lorem ipsum dolor."></div>
<div class="right"><img src="" alt="right"></div>
<ul class="center">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</header>

Answer 2

you can reset BFC for ul , so it can center itself in between floatting elements without laying under it.
Diplay:table; would be appropriate since container will also shrink on its content:
header {
width: 100%;
background:linear-gradient(to left, gray 50%, lightgray 50%);
}
.container {
max-width: 1200px;
}
.left {
float: left;
margin-right:50px;/* cause it is 50px less wide than the other one */
}
.right {
float: right;
}
.center {
display:table;
margin:auto;
padding:0;
border-spacing:0.25em;
}
.center li {
display:table-cell;
border:1px solid;
}
<header>
<div class="container">
<div class="left"><img src="http://lorempixel.com/50/50"></div>
<div class="right"><img src="http://lorempixel.com/100/50"></div>
<ul class="center">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<header>
or flex:
header {
width: 100%;
background:linear-gradient(to left, gray 50%, lightgray 50%);/* see center */
}
.container {
max-width: 1200px;
display:flex;
}
.left {
order:-1;
margin-right:-50px;/* if know wich is biiger and how much bigger an equal negative margin of that extra size may swallow the difference .. */
}
.right {
order:1;
}
.center {
display:flex;
margin:auto;/* instead : justify-content:space-between; on parent (given into another answer ) */
padding:0;
order:0
}
.center li {
list-style-type:none;
margin:0.25em;
border:solid 1px;
}
<header>
<div class="container">
<div class="left"><img src="http://lorempixel.com/100/50"></div>
<div class="right"><img src="http://lorempixel.com/50/50"></div>
<ul class="center">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<header>

Answer 3

The simplest and easiest way is flexbox. Like this:
.container {
display: flex;
justify-content: space-between;
}
<header>
<div class="container">
<div class="left"><img src="http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png"></div>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div class="right"><img src="http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png"></div>
</div>
<header>

Answer 4

Try this method:
.inline-block { display: inline-block; }
.floatright { float: right; }
.floatcenter { margin-right: auto; margin-left: auto; }
.floatleft { float: left; }
<div style="text-align:center;">
<div class="inline-block floatleft">Logo</div>
<div class="inline-block floatcenter">Menu</div>
<div class="inline-block floatright">Options</div>
</div>