html - 使用 CSS 将图片放入目录中

Question

我最近开始学习 HTML 和 CSS。为了练习我所学的知识，我在我的电脑上建立了一个网站。现在，我希望主页成为网站的目录，并在两列中包含指向网站其他部分的链接，两列由页面中央的图片分隔。下面的代码几乎可以正常工作，因为它确实在页面的左侧和右侧设置了两列。但是，无论我尝试什么，我都无法让图像停留在页面中间。我之前设法混合使用 margin 和 width 属性进入死点，但如果我缩小页面，它就不会留在中心(我仍然使用 display:inline 设置了图像，所以这可以解释它但这是我能够在一行中获取列和图像的唯一方法)。我还尝试了不同的变体，使用 margin 设置为 auto 和使用 float 设置为 center。

如何将页面设置为在图像的每一侧都有一列链接并且所有链接都在一个容器中？

目前目录部分的代码:

       <div class="Table-of-Contents">
        <ul class="ToCLeft-Column">
          <li> <a href="About_Me/info.html">A Little bit about my life</a> </li>
          <li><a href="My_Family/index.html">This is my family</a></li>
          <li><a href="Mental_Health_Wonderland/info.html">On a more serious note</a>
              </li>
        </ul>

        <img src="images/try_science.png" alt="Test Center" class="Center-Image"/>

        <ul class="ToCRight-Column">
          <li><a href="My_Interests/info.html">My Interests</a></li>
          <li><a href="Contact/Contact_Me.html">If you want to get in touch with me</a>
             </li>
        </ul>
      </div>

以及对应的CSS:

.ToCLeft-Column{
  display: inline;
  float: left;
 }

.Center-Image{
  display: inline;
  width: 100 px;
  margin: 10 px auto 10 px auto;
  text-align:center;
 }

.ToCRight-Column{
  display: inline;
  float: right 
  }

Answer 1

要使表格居中对齐，

1. 在表外创建一个容器。

2. 将此添加到表格的 css:margin : 0px auto;

这只会使表格与页面中心对齐。要将图像对齐到表格的中心，请为两个 ul 赋予相同的宽度。

这是演示:http://jsfiddle.net/HdNgJ/9/

现在构建一个即使在页面缩小到移动屏幕范围内也看起来整洁的页面完全是另一回事。它被称为构建响应式设计。