需要帮助对齐/居中导航栏和表格内容 (CSS)答案

【问题标题】：Need help aligning/centering navigation bar & table content (CSS)需要帮助对齐/居中导航栏和表格内容 (CSS)
【发布时间】：2015-07-20 03:44:16
【问题描述】：

我的代码：

HTML

<body>

<div class="gridContainer clearfix">
  <div id="header">
<!-- Start NavBar -->
    <div id="navbar" name="nav-top">
      <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">FAQ</a></li>
      </ul> 
    </div>
  </div>

<!-- End NavBar/Start Content -->

<div id="content">

<div id="inner">

<!-- Content Header -->

  <table id="table_1">
    <tbody>
      <tr id="tab_head">
        <th><h1>About me | Section 1</h1></th>
      </tr>
      <tr id="para_1">
        <td><h3>Hello and Welcome!</h3></td>
      </tr>
    </tbody>
  </table>

<!-- Content Body -->

<table id="table_2">
  <tbody>
    <tr>
      <td><p>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah BLah Blah Blah Blah Blah Blah Blah.</p></td>
    </tr>
  </tbody>
</table>
</div>

</div>

<div id="my-footer">This is the content for Layout Div Tag "footer"</div>

</div>
<!-- Add JS -->
</body>

CSS

#navbar {
    width: 100%;
    float: none;
    margin: 0 0 3em;
    padding: 0 0 0 0;
    background-color: #ffffff;
    border-bottom: 1px solid #2B9EFF;  }

#navbar ul {
    list-style: none;
    width: 730px; /* 730px width was 800px before, but changed to slide navbar to right */
    margin:0 auto;
    overflow:hidden; }

#navbar li {
    float: left; }

#navbar li a {
    width:150px;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    font-weight:normal;
    color: #a3a3a3;
    border-right: 1px solid #ccc; }

#navbar li:first-child a {
    border-left: 1px solid #ccc; }

a:link, a:visited {
    background-color: #ffffff;
    text-align: center;
    text-transform: uppercase;
}

#navbar a:hover, a:active {
    background-color: #2B9EFF;
    color: #141414;
    font-weight:lighter; }

/* Content */

table {
    width: 100%;
    text-align: center;
}

#para_1 td {
    text-align:center;
}

#table_2 {
    width:100%;
    text-align:justify;
    margin
}

#my-footer {
    width:100%;
    height:80px;
    position: fixed;
    bottom:0;
    left: 0;
    clear:both;
    background:#2B9EFF;
    text-align:center; }

如果您还没有注意到的话，我主要担心的是，我的主导航栏应该位于其他所有内容之上，却没有位于页面中心。到目前为止，我不得不忍受的是一个完成一半的造型，这最终导致了我现在所拥有的。似乎我可以通过以像素为单位设置宽度来稍微调整它，但是当我尝试使用百分比来处理它时，它就崩溃了。

我要开始工作的第二点是下面的内容，其中包含我的各种摘要以及最终将承载某些其他内容（链接、图像等）的内容。我以为我可以用一张桌子来处理它，但我无法终生将“抽象”（Blah）内容置于中心位置。所以，我当时做的是创建第二个表格，认为我可以调整该表格两侧（左右）的边距以使所述摘要居中。

没用。

我目前正在使用 Adobe CS6 并使用液体网格布局启动页面。我想关注一种布局/样式，它还将考虑用户显示器的整体不同分辨率/尺寸。换句话说，我希望它在通过手机或平板电脑查看时进行调整。

请列出任何建议。在这方面我完全是新手，所以我觉得来到这里会让我有更好的机会了解我做错了什么。

请随意询问更多信息，但考虑到我的初始查询，我认为到目前为止我提供的内容应该足够了。

我可以做些什么来调整我的导航栏？

在考虑液体网格时，我可以将当前元素保持在它们所处的位置/样式 -布局，还是我必须尝试不同的路径？

为什么我不能在左侧添加第二个表格的边距右侧？

感谢您提出的任何建议！

诚挚的问候，

T.R.G.

【问题讨论】：

标签： html css

【解决方案1】：

你必须添加这个类：

.clear {
  clear: both;
  float: none;
}

CSS 更改：

#navbar ul {
  list-style: none;
  width: 730px;
  overflow: hidden;
  clear: right;
  float: right;
  margin: 0;
  padding: 0;
}

#navbar {
  width: auto;
  clear: right;
  float: right;
  padding: 0 0 0 0;
  background-color: #ffffff;
  border-bottom: 1px solid #2B9EFF;
}

HTML 更改：

<div id="header">
<!-- Start NavBar -->
    <div id="navbar" name="nav-top">
      <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">FAQ</a></li>
      </ul> 
</div><div class="clear"></div>
  </div>

【讨论】：

它没有用。我尝试根据您的第二篇文章对其进行编辑，并在参考您的第一篇文章后更新了我的 html，但它仍然没有居中。我应该给桌子“清晰”的课吗？还有，为什么不居中？
谢谢你写的东西。我现在明白了。

【解决方案2】：

我保留了原来的 HTML，但我最终在 CSS 上使用了这个：

CSS

#navbar {
    width: 100%;
    /* float: none; */
    margin-bottom: 3em;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    float:none;
    background-color: #ffffff;
    border-bottom: 1px solid #2B9EFF;  }

#navbar ul {
    list-style: none;
    width: auto;/* 730px width was 800px before, but changed to slide navbar to right */
    margin:0 auto;
    padding: 0 20% 0 20%;
    overflow:hidden; }

table {
    width: 100%;
} 

#table1 th, td {
    width:auto;
    float:none;
    text-align:center;
}

#table_2 {
    width:50%;
    float:none;
    margin: 0 auto;
    text-align:justify;
}

现在，这就是我拥有它的方式——直到我想出一种通过样式将列表扩展到整个页面的方法。如果您注意到，放置在列表（导航栏）元素（li）底部的边框会淡出并且不会跨越页面，这不是我想要的。从设计的角度来看，当页脚本身跨越页面时，页面看起来不一致且前卫。所以，如果你觉得你知道如何解决这个问题，请随时通知我。

顺便说一句，我要感谢 Peter Szombati 的贡献。

虽然它最终并没有真正帮助，但他最终给了我一些观点，这导致了我上面所说的。如果你注意到了，我确实采纳了他对第二张桌子（宽度）的造型建议。

谢谢大家，

祝你有美好的一天。

T.R.G.

【讨论】：