Div布局与Table布局_盒子布局和table布局-CSDN博客

本文链接：https://blog.csdn.net/CarlHui/article/details/470959

博主做网站时采用Div布局，起初代码整洁，但遇到Div无法垂直居中对齐、图片无法垂直居中显示的问题。尝试无Table布局未解决，结合Table布局后满足需求，博主希望了解不用Table实现的方法，并给出参考网站。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前几天在做个网站,想全部用Div布局,起初控制得还好,代码也很整洁,但是Div没有垂直居中对齐(至少我没有过找到相关属性),后到不结合Table,如下代码:
1、无Table
<div class="sectionItem">
     <div class="image">
         <a href="RoadWarningLamp/default.aspx"><img src="imagesHandler.aspx?id=SectionInfots-303-1.JPG&Height=-1" align="middle" border="0" ></a>
     </div>
     <div class="title">
      <a href='RoadWarningLamp/default.aspx'>
       Road Warning Lamp
      </a>
     </div>
    </div>

试了半天，也不能让图片垂直居中显示

2、有Table
<div class="sectionItem">
     <div class="image">
      <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
       <tr>
        <td align="center" valign="middle">
         <a href="RoadWarningLamp/default.aspx"><img src="imagesHandler.aspx?id=SectionInfots-303-1.JPG&Height=-1" align="middle" border="0" ></a>
        </td>
       </tr>
      </table>
     </div>
     <div class="title">
      <a href='RoadWarningLamp/default.aspx'>
       Road Warning Lamp
      </a>
     </div>
    </div>

这样之后才足了我的需求

不知道那位可以做到不用Table实现

具体效果可参见改下网站：http://ykh.51086.com