html - 三列布局中的 CSS 中心元素

Question

所以我的网页上有一个 3 栏布局，但我无法让中间栏中的内容居中。左右两列的宽度是固定的，所以我为中间的列创建了一个容器，并将其边框设置为与左右两列的大小相等。然后，我在中间容器内的 div 标记上使用了 margin:auto 属性，中间列中包含我想要的所有内容。如果可能的话，我希望它适用于所有浏览器窗口大小。这是我的 CSS:

#top
{
    width:100%;
    background-color:#FF0000;
    height:30px;
    overflow: auto;
    width: 100%

}


#right
{
    float:right;
    width:100px;
    background-color:#CCC;
    height:100%;
}

#middleCont
{
    margin-left:150px;
    margin-right:100px;
}

#middle
{
    margin:auto;
    text-align:left;    
}


#left
{
    float:left;
    width:150px;
    height:100%;


}

由于某种原因我无法在没有浏览器呈现的情况下发布 html，因此我在文本文件中上传了相关代码:http://www.mediafire.com/?a89kr1bb4uwb4cf

在此先感谢您的帮助。

Answer 1

是的，首先，在 #middle 下，您说的是 text-align: left 而不是 text-align: center。在我改变它的那一刻，它工作得很好。

我在文档中插入了不同类型的标签，包括p、div、blockquote、列表、表格和图像.我注意到的唯一问题是 table 没有居中。看了很多文章，我发现你已经在CSS中实现了推荐的表格居中方式。我认为也许，解决这个问题的唯一方法是使用 center 标签制作一个表格，或者在您的 CSS 文件中创建一个新的文本 block 。

你可以随心所欲，但推荐的方式是这样的:

#center {
  margin: auto;
}

然后用#center作为ID创建一个新表。

<table id="center">
  ...
</table>

如果你选择使用 center 标签，你可以这样实现它:

<center>
  <table>
    ...
  </table>
</center>

希望我有所帮助。祝你好运。