定位表

Question

我正在尝试将文本放在图像的中心位置。

<table width="261" height="253" cellspacing="0" cellpadding="0" align="left" style="margin-left: 0px; margin-top: 0px; margin-right: 5px; border-collapse: collapse;">
  <tbody>
    <tr>
      <td style="vertical-align: top; letter-spacing: 0px; word-spacing: 0px; background-image: none; background-repeat: repeat; background-position: 0% 0%; height: 235px; padding-left: 10px; padding-right: 10px; padding-top: 0px;">
        <p> 
          <table width="" cellpadding="0" align="center" style="border-collapse: collapse; margin-top: 0px; margin-right: 0px; margin-left: 40px; width: 189px; height: 121px;">
            <tbody>
              <tr>
                <td><span style="font-family: Tahoma;"><span style="font-weight: bold;">Lorem Ipsum</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer </span></td>
              </tr>
            </tbody>
          </table><img src="/resource/resmgr/boxes/box_connect2.png" title="" alt="" /></p></td>
    </tr>
  </tbody>
</table>

Answer 1

首先，将你的CSS从内联中取出并放入一个合适的CSS文件中。

这是清理和一种可能的解决方案：

http://jsfiddle.net/UD2XV/

<强> HTML

<table cellspacing="0" cellpadding="0" class="outer_table">
  <tbody>
    <tr>
      <td class="outer_td">

          <table width="" cellpadding="0" class="inner_table">
            <tbody>
              <tr>
                <td>
                    <span class="inner_text">Lorem Ipsum</span> 
                    is simply dummy text of the printing and typesetting industry. 
                    Lorem Ipsum has been the industry's standard dummy text ever since 
                    the 1500s, when an unknown printer
                </td>
              </tr>
              <tr>
                  <td>
                      <img src="/resource/resmgr/boxes/box_connect2.png" title="" alt="" />
                  </td>
              </tr>
            </tbody>
          </table>

        </td>
    </tr>
  </tbody>
</table>

<强> CSS

.outer_table { width:261px; height:253px; margin-left: 0px; margin-top: 0px; margin-right: 5px; border-collapse: collapse; text-align:left;}

.inner_table{border-collapse: collapse; margin-top: 0px; margin-right: 0px; margin-left: 40px; width: 189px; height: 121px; text-align:center;}

.outer_td {vertical-align: top; letter-spacing: 0px; word-spacing: 0px; background-image: none; background-repeat: repeat; background-position: 0% 0%; height: 235px; padding-left: 10px; padding-right: 10px; padding-top: 0px;}

.inner_td{font-family: Tahoma;}

.inner_text {font-weight: bold; font-family: Tahoma;}