How to vertically align text in an inline-block td?

Question

I have a table with one row full of tds. I made them display: inline-block so that they would wrap with the page. I can't seem to make the text inside them vertical-align: middle. How would I accomplish this? Or is display: inline-block not the way to go? Thanks.

EDIT Here is the code. Sorry I'm new to posting.

<div>
    <table class="disk-size-table center">
        <tr class="disk-size-row">

            <!-- <td class="disk-size-td draggable" data-disk-size="500">
                    500 GB <!-- I want the 500GB to be vertical align middle
                 </td> -->

        </tr>
    </table>
</div>

.disk-size-table {
    border-spacing: 0;
}

.disk-size-td {
    border: 1px solid black;
    border-radius: 5px;
    width: 60px;
    height: 70px;
    text-align: center;
    vertical-align: middle;
    padding: 0;
    display: inline-block;
}

table.center {
    margin-left: auto;
    margin-right: auto;
}

I dynamically generate tds that look like the commented one. I want them to show up vertically aligned middle. Let me know if I need to post anything else.

Welcome to StackOverflow! To write a better question and increase your chances of receiving answers, please include your relevant code in the question. — TylerH, Jul 15 '14 at 14:35
you could try text-align: center; or follow this answer http://stackoverflow.com/questions/9249359/is-it-possible-to-vertically-align-text-within-a-div — legendary_rob, Jul 15 '14 at 14:40
Try to explain what you are trying to achieve. Using `td` elements implies that you want all the elements to have the same height. But changing the display type to inline-block will cause each cell to have a shrink to fit height/width. Without any additional information, it is hard to propose a solution. Usually with these questions, as soon as an answer is posted, new requirements come out, so please, elaborate! — Marc Audet, Jul 15 '14 at 14:43
@SkeetsMcCoy `line-height` only works if you don't have multiple lines of text. Simply remove your fixed height for `.disk-size-td` (see my answer below) and it should work with multiple lines of text. — mrksbnch, Jul 15 '14 at 15:35

score 0 · Answer 1 · answered Jul 15 '14 at 14:58

0

Is this what you want: Fiddle

Only change made is in CSS

.disk-size-td {
    .....
     display: table-cell; // Add this
 }

answered Jul 15 '14 at 14:58

Ani

4,473
4
26
31

score 0 · Answer 2 · answered Jul 15 '14 at 14:59

0

If having display: inline-block isn't a requirement for another piece of you project, you can simply change to display: float which will give you the style you desire. There are a few functional differences you should look out for if you do do this which can be better understood from this explanation of the difference betweent the two: http://learnlayout.com/inline-block.html .

answered Jul 15 '14 at 14:59

Joe Urc

487
5
19

Float did not work either. It still did not vertical align middle. – SkeetsMcCoy Jul 15 '14 at 15:08
`display: float` doesn't exist in CSS, you probably meant `float: left / right` – mrksbnch Jul 15 '14 at 15:16

score 0 · Answer 3 · answered Jul 15 '14 at 15:21

If you keep the td's as table-cells, you can use this:

<style>
td { display: table-cell; border: 1px solid red; max-width: 250px; }

.content, .vcenter { display: inline-block; vertical-align: middle; }
.content { border: 1px solid green; }
.vcenter { height: 100%; width: 0; }
</style>

<table><tr>
<td>
    <div class="content">
        500 GB
    </div><div class="vcenter"></div>
</td>
<td>
    <div class="content">
        asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf 
    </div><div class="vcenter"></div>
</td>
</tr></table>

The "vcenter" div expands to the height of the cell, making the line that high inside the cell. Then the "content" div can use vertical-align:middle to align itself vertically on the line within the cell.

If you change the td's into inline-blocks, using vertical-align:middle on the cells should make the cells align on the vertical center of the line:

<style>
td { display: inline-block; vertical-align: middle; border: 1px solid red; max-width: 250px; }

.content { border: 1px solid green; }

</style>

<table><tr>
<td>
    <div class="content">
        500 GB
    </div>
</td>
<td>
    <div class="content">
        asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf 
    </div>
</td>
</tr></table>

But if the td's need to go on multiple lines, then there is no point in using tables, and it's easier to use div's only.

score 0 · Answer 4 · answered Jul 15 '14 at 15:29

vertical-align: middle works both with display: table-cell in CSS / <td> in HTML and display: inline-block;.

Since you are already using <table> for your markup you don't need to use display: inline-block; anymore.

To vertically align your <td> simply remove your fixed height: 70px; and display: inline-block; from .disk-size-td {}. Here is a working fiddle. If all your items have a fixed height there is nothing to align vertically :)

You may want to add some padding: 10px 0; (or whatever padding you want) to your <td> as well.

How to vertically align text in an inline-block td?

4 Answers4

Linked