How to vertically align a text in a div which has overflow hidden?

Question

I have a gridView in asp which will generate a table. As I need to show only fixed number of lines in a TD looking around I came to decision to place a div inside a td so then I could achieve my goal.

table.XDataGridView td div.inner-table-div {
height: 32px;
padding: 1px;
overflow: hidden;
display: block;
}

.rfTaskExecutionWrapper td {
    min-width: 100px;
    font-size: 12px;
}

I want that first column to be vertically aligned on center, same for second column. I also wish to show only 2 or 3 lines of text. For that I've limited the height though it seems that I still see some text of third line - which I don't want.

The solution has to work on chrome and on Internet Explorer 7(on windows CE).

Answer 1

Vertically aligning the content of a table cell can be done using vertical-align: middle on your td.

If you want to make sure there's only two lines visible in your second colomn, use line-height. The height of your div is 32 pixels. you have a padding of 1 pixel on the top and the bottom so that leaves 30 pixels. (asuming you're using the standard box-sizing) That means that if you add line-height: 15px to your div, you will only see two lines and no trailing third line.