tid - html表格對齊



如何將表格右側的文本垂直對齊到表格中間? (3)

我用這個非常有用的堆棧溢出鏈接創建了一個“內聯”表,看起來像一個分數。 它的圖片如下所示:

現在一切正常,但看看它旁邊的內容放在什麼時候會發生什麼:

加號與表格的頂部對齊。 所以我想知道,有沒有辦法將它對齊到桌子中間(靠近vinculum或中間線)?

編輯:由於用戶的要求,這是我的表和代碼加號:

<table style="border-collapse: collapse; width: auto; float: left; margin: 2px;">
  <tbody>
    <tr><td style="text-align: center;padding: 5px; border-bottom: 1px solid black;">3</td></tr>
    <tr><td style="text-align: center; padding: 5px;">5</td></tr>
  </tbody>
</table>
+

此外,所有上面的代碼都放在ap元素中。

https://src-bin.com


Answer #1

你為什麼要用桌子? 我覺得這樣比較好:

HTML:

<span class="fraction">
    <span>5</span>
    <span>3</span>
</span>
+
<span class="fraction">
    <span>1</span>
    <span>2</span>
</span>

CSS:

.fraction{
    display:inline-block;
    vertical-align:middle;
}
.fraction>span{
    display:block;
}
.fraction>span:first-child{
    border-bottom:1px solid black;
}

在這裡看到: http : //jsfiddle.net/7aQUP/

編輯:

您也可以添加填充,以便在分數內有分數時增加分隔線:

.fraction>span{
    padding:0 7px;
}

在這裡看到: http : //jsfiddle.net/7aQUP/2/


Answer #2

感謝Sreenath Soman的想法,我增加了p元素的填充,並且使用了一個負margin-top向上移動整個表格。 如果不是填充,桌子的一半就會消失。 所以這就是填充的目的。


Answer #3
<table style="border-collapse: collapse; width: auto; float: left; margin: 2px;">
    <tbody>
        <tr>
            <td style="text-align: center;padding: 5px; border-bottom: 1px solid black;">3</td>
        </tr>
        <tr>
            <td style="text-align: center; padding: 5px;">5</td>
        </tr>
    </tbody>
</table>
<table style="border-collapse: collapse; width: auto; float: left; margin: 2px;">
    <tbody>
        <tr>
            <td style="text-align: center;padding-top: 20px;">+</td>
        </tr>
    </tbody>
</table>

這看起來工作。 試試這個: http : //jsfiddle.net/Cg9jy/1/





vertical-alignment