3

このフィドルは問題を示しています：http：//jsfiddle.net/wrYsx/

関連コード：

<style>
    #floater {
        background-color: red;
        height: 35px;
        width: 35px;
        float: right;
    }

    table {
        width: 100%;
    }

    table tr td {
        border: 1px solid green;
        vertical-align: middle;
        height: 35px;
    }
</style>
<table>
    <tr>
        <td>
            <div id='floater'></div>
            some text
        </td>
    </tr>
</table>

<table>
    <tr>
        <td>
            some text
        </td>
    </tr>
</table>

基本的に、指定された高さのtdがある場合は、vertical-alignを使用できます。tdの中央から中央に配置します。ただし、td内にフロートされている別の要素がある場合（私の場合は右）、vertical-alignは尊重されず、テキストはtdの上部に配置されます。これをスタイリングして、vertical-align要素とfloat要素を持つtdを作成する方法はありますか？

また、私はこの投稿を見つけました：stackoverflow.com/questions/2641615/table-cell-doesnt-obey-vertical-align-css-declaration-when-it-contains-a-floateしかし、私にとっては解決策ではありませんフロート要素が必要になる可能性があります。ポジショニングを使用して同じレイアウトを模倣しようとしましたが、tdセルを配置して、その内側の位置：絶対値を使用して「フローティング」要素を右側に配置できるようにはなりません：0。

4

3 に答える 3

4

td に空の要素を追加してみてください。

<span class="vertical_aligner"></span>

.vertical_aligner {
    vertical-align: middle;
    height: 100%;
    display: inline-block;
}
于 2012-10-25T18:20:19.377 に答える
1

絶対配置は仕事をするようです。position:relative必ずTDを装着する必要があります。

#floater {
    background-color: red;
    height: 35px;
    width: 35px;
    position:absolute;
    top:0;
    right:0
}

table {
    width: 100%;
}

table tr td {
    border: 1px solid green;
    vertical-align: middle;
    height: 35px;
    position:relative;
}
于 2012-10-25T18:13:49.950 に答える
0

line-heightこれを修正するには、セルの高さに合わせて表のセルを設定します。

jsFiddle の例

table tr td {
    border: 1px solid green;
    vertical-align: middle;
    height: 35px;
    line-height:35px;
}
​

これは、セル内のテキストが 1 行を占める場合にのみ機能することに注意してください。

于 2012-10-25T18:15:42.437 に答える