Near center of li element when items have different widths
I have an unordered list with a logo image in a center element. Each of the list items on both sides of the logo has a different width.
ul - 100%, with alignment center applied.
I'm trying to find a way to keep the li logo in the center of the page, ideally with just CSS.
Does anyone have any idea how this can be achieved?
<ul>
<li>Dummy</li>
<li>Dummy</li>
<li>Dummy</li>
<li><img src="logo.jpg" />
<li>Dummy</li>
<li>Dummy</li>
<li>Dummy</li>
</ul>
It will be like this:
source to share
I split it into two separate lists and moved the image out of the list. Floating on both sides left and right, and overlapping on each side, so there is enough clearance for the image. Then completely center the image and use the transform hack to make sure it's dead. You can increase the amount of indentation to remove text from the image.
http://jsfiddle.net/g1dggym7/1/
body {
width:100%;
margin:0;
padding:0;
}
ul {
list-style:none;
width:100%;
margin:0;
padding:0;
display:block;
float:left;
width:50%;
box-sizing:border-box; /* Make padding be inclusive of width */
}
ul.l {
text-align:right;
padding-right:175px; /* Half image width */
}
ul.r {
padding-left:175px; /* Half image width */
}
ul li {
display:inline-block;
line-height:150px; /* Height of the image */
}
section {
width:100%;
position:relative;
}
section img {
width:350px;
position:absolute;
top:0;
left:50%;
transform: translateX(-50%);
}
<section>
<ul class="l">
<li>Dummy</li>
<li>Lorem Ipsum</li>
<li>Dolor Sit</li>
</ul>
<ul class="r">
<li>Nar Harbet</li>
<li>Test</li>
<li>Text</li>
</ul>
<img src="http://placehold.it/350x150" />
</section>
It's worth noting that if the text ends on two lines it looks broken, so you might need some media queries for a small screen width if you haven't already.
source to share
This assumes you can change the HTML (add classes) and you know the logo width (assume 100px for this example).
Html
<ul>
<li class="left">Dummy</li>
<li class="left">Dummy</li>
<li class="left">Dummy</li>
<li class="logo"><img src="logo.jpg" />
<li class="right">Dummy</li>
<li class="right">Dummy</li>
<li class="right">Dummy</li>
</ul>
CSS
ul{
list-style-type:none;
margin:0;
padding:0;
position:relative;
}
ul:before, ul:after{
content:"";
display:table;
}
ul:after{
clear:both;
}
li{
max-width:14.28%;
}
li.left{
float:left;
}
li.right{
float:right;
}
li.logo{
position:absolute;
top:0;
left:50%;
margin-left:-50px;
width:100px;
}
The max width is 14.28% (1 / 7th of 100% because 7 points).
source to share
There is a way to do this with pure CSS using CSS Exceptions however browser support is sorely lacking , only IE 10+ is supported (!!!)
By setting the following class on the image, we can simulate the float: center effect on the image
.exclusion {
-ms-wrap-flow: both; /* apply exclusion to img */
position: absolute;
right: 0; /* center the img */
left: 0; /* center the img */
margin: auto; /* center the img */
}
Check out this fiddle using IE 10+
ul {
list-style-type: none;
text-align: center;
}
li {
display: inline-block;
}
.exclusion {
-ms-wrap-flow: both;
position: absolute;
right: 0;
left: 0;
margin: auto;
}
<ul>
<li>Dummy1</li>
<li>This is some long dummy2 text!!!</li>
<li>Dummy3</li>
<li>
<img class="exclusion" src="http://placehold.it/300x100" />
</li>
<li>Dummy4</li>
<li>Dummy5</li>
<li>Dummy6</li>
</ul>
source to share
If you don't want to change any HTML at all, you can use the method nth-child
.
body {
width:100%;
margin:0;
padding:0;
}
ul {
list-style:none;
width:100%;
margin:0;
padding:0;
display:block;
text-align:center;
position:relative;
box-sizing:border-box;
}
ul li {
display:inline-block;
line-height:150px;
}
ul li:nth-child(-n+3) {
position:relative;
right:215px;
}
ul li:nth-child(n+5) {
position:relative;
left:145px;
}
ul li:nth-child(4) {
position:absolute;
left:50%;
transform:translateX(-50%);
}
<ul>
<li>Dummy</li>
<li>Lorem Ipsum</li>
<li>Dolor Sit</li>
<li>
<img src="http://placehold.it/350x150" />
</li>
<li>Nar Harbet</li>
<li>Test</li>
<li>Text</li>
</ul>
The caveat with this method is that you need to change the values left
and right
if the amount of text changes, and if you add or remove li
you need to change the nth-child
numbering.
source to share