3

以下の表とテキストが Blackberry OS5 の中央に表示されない理由を調べています。テーブルに幅を持たせたり、その他の多くのトリックや回避策を試みました。他のすべてのクライアントは現在、意図したとおりに機能しています。

コード サンプルに加えて、HTML コードを含む Litmus テストへのリンクも含めました。

アップデート：

以下の回答でさまざまなバリエーションを試しましたが、テーブルを中央に配置できません。BB 5OS のコンテンツだけです。デモの分離として、テーブルをその内容とともに中央に配置しても問題はありませんが、電子メール内では問題ありません。

電子メールの設計に関する私の目標は、メディア クエリを読み取らないデバイスでも機能するように、相対的なサイズを維持することでした。したがって、これは簡単に解決できますが、現在正しくセンタリングされている他のクライアントに悪影響を与えることは避けられません。

2013 年 10 月 20 日に更新されたコードの抜粋:

  <td height="50" align="center"  bgcolor="#5900FF" style="border-collapse:collapse; text-align:center;">
    <center>
    <div style="display: table; text-align:center;"  >

      <table width="100%"  bgcolor="#FF0004" border="0" align="center" cellpadding="0" cellspacing="0" class="center-type table-greetings" style="display: table; text-align:center;" >


        <tbody style="text-align: center; ">
          <tr>
            <td height="40" align="center" class="center-type" valign="top" style="color: #ffffff; line-height: 30px; font-size: 29px;font-family: 'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif; font-weight: normal; text-align:center; display:block;"><font face="'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif;" size="3" style="color: #ffffff; line-height: 30px; font-size: 29px;font-family: 'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif; font-weight: normal;">Wrap Up Your</font></td>
          </tr>
          <tr>
            <td align="center" class="center-type" style="font-size: 29px; color: #F38B00; line-height: 36px; letter-spacing : 11px; font-family: 'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif; text-align:center; margin: 0 auto;"><font size="5" face="'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif;" style="font-size: 29px !important; color: #F38B00; line-height: 36px; letter-spacing : 11px; font-family: 'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif;  font-weight: bold;">HOLIDAY GREETINGS</font></td>
          </tr>
          <tr>
            <td height="40" align="center" class="center-type" valign="bottom" style="color: #ffffff; line-height: 30px; font-size: 29px;font-family: 'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif; font-weight: normal; text-align:center;  margin: 0 auto;"><font face="'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif;" size="3" style="color: #ffffff; line-height: 30px; font-size: 29px;font-family: 'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif; font-weight: normal;">Early This Year</font></td>
          </tr>
        </tbody>
      </table>

      </div>
    </center>
  </td>

Litmus Test 2013 年 10 月 20 日の更新: https://litmus.com/pub/bce8f62

4

3 に答える 3

3

おっしゃったことは承知していますが、テーブルに幅を設定する必要があります。また、margin 0 auto混乱する可能性があるため、 を削除します。

それでもうまくいかない場合は、一時的に各要素に bgcolor を追加して、展開されていないデバッグをテストしてみてください。何かを中央に配置するには、親要素を全幅にする必要があるため、全幅にならない要素を特定すると、問題を特定するのに役立ちます。

アップデート：

このような簡単なことをしないのはなぜですか？

<td width="600">
  <table width="100%" border="0" cellpadding="0" cellspacing="0"  bgcolor="#FF0004">
    <tr>
      <td align="center" style="color: #ffffff; line-height: 30px; font-size: 29px; font-family: 'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif; font-weight: normal;">
Wrap Up Your<br>
<font style="font-size: 29px; color: #F38B00; line-height: 36px; letter-spacing : 11px; font-weight: bold;">HOLIDAY GREETINGS</font><br>
Early This Year
      </td>
    </tr>
  </table>
</td>

私はそれをテストしませんでしたが、何かが欠けていない限り、それはかなり簡単なセンタリングです.

于 2013-10-09T20:28:20.370 に答える
3

それはあなたの行の高さかもしれないので、私はそれを取り出してうまくいったと思います...
またはあなた <td>があなたのテーブルの外にある..または穴の本体を中心で囲むだけです..それらの作業のどれも私に知らせてくれませんコードをより徹底的に修正してみてください 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body align="center">
    <center>
        <td height="50" align="center"  bgcolor="#5900FF" style="border-collapse:collapse; text-align:center;">
            <div style="display:block; text-align:center;"  >
                <center>
                    <table bgcolor="#FF0004" border="0" align="center" cellpadding="0" cellspacing="0" class="center-type table-greetings" style="display: table; text-align:center;" >
                        <tbody style="text-align: center; ">
                            <tr>
                                <td height="40" align="center" class="center-type" valign="top" style="color: #ffffff; line-height: 30px; font-size: 29px; font-family: 'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif; font-weight: normal; text-align:center; display:block;"><font face="'raleway',Futura,' Gill Sans','Gill Sans MT', Calibri, sans-serif;" size="3" style="  color: #ffffff; font-size: 29px;font-family: 'raleway',Futura,' Gill Sans','Gill Sans MT', Calibri, sans-serif; font-weight: normal;"> Wrap Up Your</font></td>
                            </tr>
                            <tr>
                                <td align="center" class="center-type" style="font-size: 29px; color: #F38B00; line-height: 36px; letter-spacing : 11px; font-family: 'raleway',Futura,'Gill Sans',' Gill Sans MT', Calibri, sans-serif; text-align:center; margin: 0 auto;"><font size="5" face="'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif;" style="font-size: 29px !important; color: #F38B00; line-height: 36px; letter-spacing : 11px; font-family: 'raleway',Futura,'Gill Sans',' Gill Sans MT', Calibri, sans-serif;  font-weight: bold;">HOLIDAY GREETINGS</font></td>
                            </tr>
                            <tr>
                                <td height="40" align="center" class="center-type" valign="bottom" style="color: #ffffff; line-height: 30px; font-size: 29px;font-family: 'raleway',Futura, 'Gill Sans','Gill Sans MT', Calibri, sans-serif; font-weight: normal; text-align:center;  margin: 0 auto;"><font face="'raleway',Futura,'Gill Sans',' Gill Sans MT', Calibri, sans-serif;" size="3" style="color: #ffffff; line-height: 30px; font-size: 29px;font-family: 'raleway',Futura,' Gill Sans','Gill Sans MT', Calibri, sans-serif; font-weight: normal;">Early This Year</font></td>
                            </tr>
                        </tbody>
                    </table>
                </center>
            </div>
        </td>
    </center>
</body>
</html>
于 2013-10-15T08:18:46.723 に答える