Center one of many spans in div horizontaly

Question

I have a css question for a change. One that is best described with an image.

The exact definition. I have a div with multiple inline div's inside of it. I want to set a class to one of them (yellow one) to center it and move the rest of them accordingly in one line (outside div has overflow hidden) If i make second one from the right yellow, it would get centered and there will be three of them on the left side, then it(centered) and one on the right. I hope I made it clear. I know it can be done with javascript but everything is fluid so that would introduce couple of problems later on while re-sizing the whole page.

Help appreciated.

Thanks, Peter

Answer 1

(tl;dr: http://jsfiddle.net/feeela/3eq8dcLc/)

Health advice: Use JavaScript for such tasks, or you maybe get crazy.

Having said that, I present to you a fluid CSS-only version.

The variables you need to know are:

• How many items are in the list
• Which item should get highlighted

Both can be solved in CSS.

---

Limitations:

• Each list-count must be written down in CSS; so if you have a slider, which may contain three to hundred items, you have to write the CSS 98 times.
• Doesn't work with floated items inside an inner wrapper (the usual way a slider is set up) – you can't translate the inner wrapper, because there is no way of knowing how many children an element has – thus you don't know how far to translate to the left or right. You can only work directly on the individual items (as counting siblings is possible).

Knowing this, you cannot move a row of items by setting a class name to the targeted item (the one which should get highlighted) but you can do so by using a class name on the parent container.

---

Example markup:

<div class="slider item-4">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
        <li>Consequatur culpa dolore</li>
    </ul>
</div>

Step 1:

Set the item widths as percentages, based on the count of its siblings.

For an explanation on how this works, see https://stackoverflow.com/a/12198561/341201 and the linked resources.

/* two items */
.slider > ul li:first-child:nth-last-child(2),
.slider > ul li:first-child:nth-last-child(2) ~ li {
    width: 50%;
}

/* three items */
.slider > ul li:first-child:nth-last-child(3),
.slider > ul li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}

Step 2:

Move the first item using a positive (move to right) or negative (move to left) margin based on the position of the highlighted item and the sibling count. This is the tricky part.

/* Second item
  Notes:
  - The second item of three is already in the middle
*/
.slider.item-2 > ul li:first-child:nth-last-child(2) {
    margin-left: -25%;
}
.slider.item-2 > ul li:first-child:nth-last-child(4) {
    margin-left: 12.5%;
}
.slider.item-2 > ul li:first-child:nth-last-child(5) {
    margin-left: 20%;
}
.slider.item-2 > ul li:first-child:nth-last-child(6) {
    margin-left: 25%;
}

/* Third item
  Notes:
  - No third item in a list of two
  - The third item of five is already in the middle
*/
.slider.item-3 > ul li:first-child:nth-last-child(3) {
    margin-left: -33.3333%;
}
.slider.item-3 > ul li:first-child:nth-last-child(4) {
    margin-left: -12.5%;
}
.slider.item-3 > ul li:first-child:nth-last-child(6) {
    margin-left: 8.3333%;
}

/* …expand as required up to N items */

---

I prepared an example which works with two to six items in a row. If your sliders may contain more items, you have to expand the CSS accordingly.

Full example:

(Also available as JS fiddle)

hr {
    /* visual sugar */
    margin-top: 5em;
    margin-bottom: 5em;
}

.slider {
    overflow: hidden;
}

.slider > ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
    white-space: nowrap;
}

.slider > ul li {
    box-sizing: border-box;
    display: inline-block;
    overflow: hidden;
    margin-left: -4px;
    min-height: 5rem;
    white-space: normal;
    border: 1px solid black;
}
.slider > ul li:first-child {
    margin-left: 0;
}

/* The following sections sets the slider item widths */

/* two items */
.slider > ul li:first-child:nth-last-child(2),
.slider > ul li:first-child:nth-last-child(2) ~ li {
    width: 50%;
}

/* three items */
.slider > ul li:first-child:nth-last-child(3),
.slider > ul li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}

/* four items */
.slider > ul li:first-child:nth-last-child(4),
.slider > ul li:first-child:nth-last-child(4) ~ li {
    width: 25%;
}

/* five items */
.slider > ul li:first-child:nth-last-child(5),
.slider > ul li:first-child:nth-last-child(5) ~ li {
    width: 20%;
}

/* six items */
.slider > ul li:first-child:nth-last-child(6),
.slider > ul li:first-child:nth-last-child(6) ~ li {
    width: 16.6666%;
}

/* N items – expand as required… */



/* Highlight a specific item */
.slider.item-2 > ul li:nth-child(2),
.slider.item-3 > ul li:nth-child(3),
.slider.item-4 > ul li:nth-child(4),
.slider.item-5 > ul li:nth-child(5),
.slider.item-6 > ul li:nth-child(6) {
    background: yellow;
}


/* This sections centers a specific item */

/* Second item
  Notes:
  - The second item of three is already in the middle
*/
.slider.item-2 > ul li:first-child:nth-last-child(2) {
    margin-left: -25%;
}
.slider.item-2 > ul li:first-child:nth-last-child(4) {
    margin-left: 12.5%;
}
.slider.item-2 > ul li:first-child:nth-last-child(5) {
    margin-left: 20%;
}
.slider.item-2 > ul li:first-child:nth-last-child(6) {
    margin-left: 25%;
}

/* Third item
  Notes:
  - No third item in a list of two
  - The third item of five is already in the middle
*/
.slider.item-3 > ul li:first-child:nth-last-child(3) {
    margin-left: -33.3333%;
}
.slider.item-3 > ul li:first-child:nth-last-child(4) {
    margin-left: -12.5%;
}
.slider.item-3 > ul li:first-child:nth-last-child(6) {
    margin-left: 8.3333%;
}

/* Fourth item
  Notes:
  - No fourth item in a list of two and three
*/
.slider.item-4 > ul li:first-child:nth-last-child(4) {
    margin-left: -37.5%;
}
.slider.item-4 > ul li:first-child:nth-last-child(5) {
    margin-left: -20%;
}
.slider.item-4 > ul li:first-child:nth-last-child(6) {
    margin-left: -8.3333%;
}

/* Fifth item
  Notes:
  - No fifth item in a list of two, three and four
*/
.slider.item-5 > ul li:first-child:nth-last-child(5) {
    margin-left: -40%;
}
.slider.item-5 > ul li:first-child:nth-last-child(6) {
    margin-left: -25%;
}

/* Sixth item
  Notes:
  - No sixth item in a list of two, three, four and five
*/
.slider.item-6 > ul li:first-child:nth-last-child(6) {
    margin-left: -41.6666%;
}

<h3>Highlight second item</h3>

<div class="slider item-2">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
    </ul>
</div>

<div class="slider item-2">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
    </ul>
</div>

<div class="slider item-2">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
    </ul>
</div>

<div class="slider item-2">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
        <li>Consequatur culpa dolore</li>
    </ul>
</div>

<div class="slider item-2">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
        <li>Consequatur culpa dolore</li>
        <li>Ducimus facilis ipsam itaque</li>
    </ul>
</div>

<hr/>

<h3>Highlight third item</h3>

<div class="slider item-3">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
    </ul>
</div>

<div class="slider item-3">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
    </ul>
</div>

<div class="slider item-3">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
    </ul>
</div>

<div class="slider item-3">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
        <li>Consequatur culpa dolore</li>
    </ul>
</div>

<div class="slider item-3">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
        <li>Consequatur culpa dolore</li>
        <li>Ducimus facilis ipsam itaque</li>
    </ul>
</div>

<hr/>

<h3>Highlight fourth item</h3>

<div class="slider item-4">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
    </ul>
</div>

<div class="slider item-4">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
    </ul>
</div>

<div class="slider item-4">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
    </ul>
</div>

<div class="slider item-4">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
        <li>Consequatur culpa dolore</li>
    </ul>
</div>

<div class="slider item-4">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
        <li>Consequatur culpa dolore</li>
        <li>Ducimus facilis ipsam itaque</li>
    </ul>
</div>

<hr/>

<h3>Highlight fifth item</h3>

<div class="slider item-5">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
    </ul>
</div>

<div class="slider item-5">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
    </ul>
</div>

<div class="slider item-5">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
    </ul>
</div>

<div class="slider item-5">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
        <li>Consequatur culpa dolore</li>
    </ul>
</div>

<div class="slider item-5">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
        <li>Consequatur culpa dolore</li>
        <li>Ducimus facilis ipsam itaque</li>
    </ul>
</div>

<hr/>

<h3>Highlight sixth item</h3>

<div class="slider item-6">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
    </ul>
</div>

<div class="slider item-6">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
    </ul>
</div>

<div class="slider item-6">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
    </ul>
</div>

<div class="slider item-6">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
        <li>Consequatur culpa dolore</li>
    </ul>
</div>

<div class="slider item-6">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
        <li>Consequatur culpa dolore</li>
        <li>Ducimus facilis ipsam itaque</li>
    </ul>
</div>

Answer 2

A partial solution with fixed-width children using transforms:

.container {
    width: 500px;
    padding: 5px;
    border: solid 2px black;
    overflow: hidden;
}
.slider {
    position: relative;
    width: 100%;
    text-align: right;
    transform: translate(-50%);
}
.slider div {
    display: inline-block;
    margin: 0 5px;
    transform: translate(50%);
    border: solid 1px black;
    width: 47px;
    height: 30px;
}

.slider div:last-child {
    background-color: yellow;
}

Full source: https://jsfiddle.net/wh98dxav/2