使文字與表格完美對齊

我需要將「文字編號1」和「文字編號2」完美對齊。第二個文本位於表格內。我需要這樣做才能使我的程序在稍後添加的函數中工作。我在垂直對齊方面遇到了不好的時間，根據我使用的瀏覽器，它給了我不同的結果。我做錯了什麼，或者這是每種瀏覽器給出不同結果的東西。使文字與表格完美對齊

使用Microsoft Edge和IE10進行對齊是完美的。它不能完全對齊使用Chrome，Mozilla和Opera。

的代碼是

<!DOCTYPE html> 
<html> 
<head></head> 

<body style="font-size:18pt"><br><br> 

    <span> text number one 

     <table style="margin:0; padding:0; border:0; border-spacing:0; vertical-align:text-bottom; display:inline-table"> 
      <tr> 
       <td style="padding:0"> 
        text number two 
       </td> 
      </tr> 
     </table> 
    </span> 
</body> 
</html>

來源

2016-04-07 Pablo

這幾乎似乎是表格數據，所以你不應該擺在首位使用一個表。 _「我需要這樣做才能使我的程序能夠處理稍後添加的函數」 - 如果您還沒有編寫這些函數，那麼您應該能夠使用更有意義的HTML結構在語義上以開始。它可能會自動解決你的對齊問題。（如果你真的有一個真正有用的理由來使用表格，那麼請描述你正在努力實現的更多細節。） – CBroe

根據我對CSS的知識，文本應該對齊...問題是..是瀏覽器不是顯示它應該顯示的內容...就像我說的一些瀏覽器確實對齊它，而其他一些瀏覽器不會......如何在所有瀏覽器中對齊這些文本以防我的代碼出錯。。是的，我需要它成爲一張桌子。函數已經寫好了，但它是一個非常大的程序，而且這些函數不是我問題的關鍵。 – Pablo

可能是由於應用於表格元素的默認邊距/填充。使用瀏覽器的開發工具進行調查。 – CBroe

嘗試vertical-align:baseline;，但在td，而不是（從table標籤和刪除vertical-align:text-bottom;）上table。

這裏有一個codepen：http://codepen.io/anon/pen/yOpzdK

來源

2016-04-08 00:05:20 Johannes

你明白了，男人......感謝一百萬......在所有瀏覽器中完美的作品 – Pablo

@Pablo嗨，帕布羅，歡迎您！如果有效，請將我的答案標記爲正確 – Johannes

只是...再次感謝=） – Pablo

使文字與表格完美對齊

回答

相關問題