2016-04-07 9 views
1

"テキスト番号1"と "テキスト番号2"を完全に揃える必要があります。 2番目のテキストは表の中にあります。後で追加する関数でプログラムを動作させるためには、その方法が必要です。私は、私が使用しているブラウザに応じて私に異なる結果を与える垂直方向のcozで悪い時を過ごしています。私は何か間違っているのですか、これはブラウザごとに異なる結果をもたらすものです。テキストとの完全なアライメントとテーブル内の作成

アライメントは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> 
+0

ほとんど表形式のデータであると思わないので、あなたは最初の場所でテーブルを使用しないでください。 _後で追加する関数で自分のプログラムを動作させるためにはこの方法が必要です。もしまだそれらの関数を書いていないとしても、より意味のあるHTML構造で作業できるはずです意味的にはじまる。そしておそらくあなたの位置合わせの問題を自動的に解決するだろう。 (実際にテーブルを使用する正当な理由がある場合は、詳細を達成しようとしているものを記述してください。) – CBroe

+0

CSSに関する私の知識によれば、テキストは整列すべきです...質問は..ブラウザはありません表示されるはずのものを示しています...私はいくつかのブラウザがそれを整列させ、他のものはそうしないと言ったように...私のコードで何か間違っている場合に、すべてのブラウザでそれらのテキストを整列させますか?そして、はい、私はそれをテーブルにする必要があります。関数はすでに書かれていますが、それは非常に大きなプログラムであり、それらの関数は私の質問のポイントではありません。 – Pablo

+0

テーブル要素に適用されるデフォルトの余白/パディングが原因である可能性があります。ブラウザの開発ツールを使用して調査してください。 – CBroe

答えて

1

vertical-align:baseline;を試したが、tdではなく、tableに(及びtableタグからvertical-align:text-bottom;を削除する)です。ここで

はcodepenです:http://codepen.io/anon/pen/yOpzdK

+0

あなたはそれを持って、男...ありがとう百万...すべてのブラウザで完璧に動作します – Pablo

+0

@パブロハイパブロ、あなたは大歓迎です!それが動作する場合は、私の答えを正しいとマークしてください – Johannes

+0

ちょっと...ありがとう再び=) – Pablo

関連する問題