Probably something like this? text-align: center;
+ display: inline-block;
:
#container {
...
text-align: center;
}
#list1, #list2 {
...
display: inline-block;
}
Pergunta
Is it possible to center two unrelated ULs side by side horizontally?
I have this code:
<div id="container">
<ul id="list1">
<li></li>
<li></li>
...
<li></li>
</ul>
<ul id="list2">
<li></li>
<li></li>
...
<li></li>
</ul>
</div>
I've tried the "left: 50%" and then "right: 50%" CSS trick with no success.
#container { position: relative; left: 50%; }
#container ul { float: left; position: relative; right: 50%; }
Any ideas?
Solução
Probably something like this? text-align: center;
+ display: inline-block;
:
#container {
...
text-align: center;
}
#list1, #list2 {
...
display: inline-block;
}
Outras dicas
You can use table
and table-cell
:
#list1 { position: relative; width: 50%; display: table-cell; background-color: green;}
#list2 { position: relative; width: 50%; display: table-cell; background-color: red;}
#container{
display: table;
width: 100%;
text-align: center;
}
li{
list-style-type: none;
}
Or like this one ? Fiddle
#container {
position: relative;
left: 50%;
}
#container ul {
float: left;
}