Question

I’m making a list view control shuttle with add/remove buttons

Something like a control similar to this VB (gross) image example I found:

but with only the add > and remove < buttons vertically aligned in the middle.

First I tried floating to accomplish the side by side uls and buttons, but I couldn’t take care of vertically positioning the buttons in the center of the container.

I looked into a solution using inline-block with vertical-align: middle, which works if I applied it to all containers. However, I want the uls aligned to the top.

<div class="wrapper">
  <div class="inblock vert-top">
    <ul>
      <li>item list view</li>
      <li>...</li>
    </ul>
  </div>
  <div class="inblock vert-middle">
    <div>
      <button>&gt;</button>
    </div>
    <div>
      <button>&lt;</button>
    </div>
  </div>
  <div class="inblock vert-top">
    <ul>
      <li>item list view</li>
      <li>...</li>
    </ul>
  </div>
</div>

.wrapper {
  vertical-align: middle;
}

.inblock {
  display: inline-block;  
  /* IE 7 hack */
  *zoom:1;
  *display: inline;
}

.inblock.vert-top {
  vertical-align: top;
}

.inblock.vert-middle {
  vertical-align: middle;
}

http://cssdesk.com/2ZCAe (similar to jsFiddle)

Using .inblock.vert-middle does not work for the second ul, when it is applied, it sends the button container to the top. However, using .inblock.vert-middle for the second ul displays how I want it, but it doesn’t make sense.

How do I fix the CSS so it makes sense for the second ul, or how do I vertically align these buttons correctly?

Answer 1

Maybe it’s not the most elegant solution, but a table would do the job. vertical-align: middle applied to display: table-cell elements will cause the content to center vertically.