Css 将div与位于中间的桌子左侧的2个图像对齐

我有4个居中的表（页眉、导航、内容、页脚）：

。。。
...
...
...

我已经从上面的示例中删除了一些代码（边框、单元格填充等） 这使得表格位于屏幕中央，宽度为760。 在这种情况下，屏幕的左右边距包含一些空白。 我需要在这些空白处放置4个图像（两个图像在桌子的左侧；图像垂直放置；两个图像在右侧-也将一个图像放置在另一个图像的顶部）

所以，我可能需要创建两个div（Left div和Right div）。 我需要这些div与所有表的左侧和右侧对齐

左分区|所有表格|右分区

图像具有允许的最大宽度，但没有任何预定义的高度

我不知道该怎么做。。。 我通常做后端，所以我不需要CSS太多。但不是在这个项目中。。。通常我不使用表格，而是使用div来布局，然后我会使用position=“relative”来表示左和右div，但似乎它不适用于表格

---

你能给我一些线索吗？

你得把桌子放在一个隔间里。看看这个。你可以根据自己的喜好调整css，但这就是你想要做什么的方式

编辑 添加了clearfix而不是

溢出：隐藏，并在每侧添加两个图像。

EDIT2以下是如何使布局居中


桌子
​
.侧边分区{
浮动：左；
宽度：60px；
最小高度：100px；
背景色：#ccc；
填充：0 10px；
}
.主要内容{
浮动：左；
最小高度：100px；
背景色：#ccddff；
填充：0 10px；
}
/*clearfix代替溢出：隐藏*/
.clearfix:之后{
明确：两者皆有；
内容：“.”；
显示：块；
身高：0；
可见性：隐藏；
}
.clearfix{
显示：内联块；
}
.clearfix{
显示：块；
}

​
 在不将表包装到div中的情况下，是否可以执行此操作？毫无疑问，给定的网站没有集中的布局，我真的不想将网站包装表的每一页都更改为div：（.不是真的，但这有关系吗，您仍然需要将带有图像的div添加到页面上，对吗？有一个问题，集中式布局与我的示例有什么关系？您使用php或.net吗？我尝试了您的解决方案（针对一个页面）它可以与div一起工作，但集中布局消失了。表应该在屏幕的中心对齐。现在不是。我使用的是ASP（经典ASP）。它的设计没有“母版页”概念或类似概念。要添加img div，我将创建函数，添加“调用func1”和“调用func2”并不难然而，在每一页中，在每一页中进行任何其他布局更改都是痛苦的。我刚刚编辑了以您为中心的布局的答案。我们谈论的10或100页有多少页？将
text align:center；
添加到包装器中，它将被修复
<table id="header" width="760" align="center">...</table>
<table id="navigation" width="760" align="center">...</table>

<table width="760" height="28" border="0" align="center" id="content">
    ...
</table>

<table id="footer" width="760" align="center">...</table>

<div id="wrapper clearfix">
  <div class="side-div">
    <img src="http://dummyimage.com/60x60/000/fff.png" alt="left" />
    <img src="http://dummyimage.com/60x60/000/fff.png" alt="left" />
  </div>

  <div class="main-content">
    tables
  </div>

  <div class="side-div">
    <img src="http://dummyimage.com/60x60/000/fff.png" alt="right" />
    <img src="http://dummyimage.com/60x60/000/fff.png" alt="right" />
  </div>
</div>​



.side-div {
    float: left;
    width: 60px;
    min-height: 100px;
    background-color: #ccc;
    padding: 0 10px;
}

.main-content {
    float: left;
    min-height: 100px;
    background-color: #ccddff;
    padding: 0 10px;
}

/*clearfix instead of overflow: hidden;*/

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}

.clearfix {
    display: block;
}