How to vertically align text in an inline-block td

问题:

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.

回答1:

Is this what you want: Fiddle

Only change made is in CSS

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

回答2:

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 .

回答3:

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.

回答4:

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.