0

I'm trying to vertically center a row of cells in an absolutely-positioned div. The height of the div is determined by an inline-block element immediately preceding the table.

I want to keep the .title out of the table because I'd like the entire menu to break to the next line if the screen isn't wide enough.

I've tried defining the height and the line height, applying padding, and giving the .menu-box element display:table-cell and vertical-align:middle, but nothing seems to be working.

Here's the code:

<div class="container">
    <div class="menu-box">
        <h1 class="title">TITLE</h1>
        <table class="menu"><tr>
            <td>Item 1</td>
            <td>Item 2</td>
            <td>Item 3</td>
            <td>Item 4</td>
        </tr></table>
    </div>
</div>

CSS:

* {margin:0;padding:0;}
body,html {height:100%;width:100%;}

.container {
    position:relative;
    height:100%;
}

.menu-box {
    position:absolute;
    bottom:0;
    width:100%;
//  line-height:132px;
}

.title {
    display:inline-block;
    font-size:132px;
}

.menu {
    display:inline-table;
    font-size:26px;
//  padding:40px 0;
}

And a Fiddle

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
jane
  • 385
  • 1
  • 4
  • 14
  • 3
    Don't use tables. my advice is to use ul, li :) – Dhaval Marthak Mar 31 '14 at 15:02
  • @Dhaval is correct. Tables should beused for tabular elements only. – LOTUSMS Mar 31 '14 at 15:05
  • 1
    Not that that has anything to do with the question you asked, of course. :) – Daniel Beck Mar 31 '14 at 15:06
  • @Mr.Alien you're right. That works. I just needed to apply it to both the `.title` and the `.menu`. – jane Mar 31 '14 at 15:06
  • @Dhaval I wanted to keep the menu items in a single row in case the viewport width was smaller than the total width of the menu and the title. Should I use `div`s instead and use css to give it `display:inline-table` etc? – jane Mar 31 '14 at 15:08

1 Answers1

0

There are a few ways to vertically align a list. line-height, vertical-align, padding.

I personally use padding frequently, because it is a bit more dynamic, in my opinion, when percentages are used. I re-built your code HERE to show what I mean.

LOTUSMS
  • 10,317
  • 15
  • 71
  • 140