html - 始终在页面中间显示 3 个表

Question

我一直在使用 CSS 使图像始终位于页面中间，但现在我想要图像左侧有 6 个链接，图像右侧有 6 个链接。当页面大小发生变化时，我希望所有三个都停留在页面中间。

我不确定我是需要 3 个表，还是 1 个中间只有一行的表？我认为 1 表会更容易，但我可以在第一列中有 6 行，在第二列中有 1 行(图像将占据大部分行)和在第三列中有 6 行吗？设置表格后，我需要它们 float 在页面中间。

任何帮助将不胜感激!这是我用来使图像居中的代码。

IMG.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Answer 1

如果 display:flex 没问题，你就不需要表格了:

html {
  height:100%;
  width:100%;
  display:flex;
}
body {
  margin:auto;
  border:solid;
}
nav {
  counter-reset:links;
  display:flex;
  background:gray;
  padding:0 1em;
}
img {
  margin:1em;
}
ul {
  padding:0;
  margin:auto;
  list-style-type:none;
}
a:after {
  counter-increment:links;
  content:' 'counter(links);
}

<nav>
  <ul>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
  </ul>
  <img src="http://lorempixel.com/100/200/nature/7"/>
  <ul>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
  </ul>
</nav>

这只是一个猜测，因为您没有提供 HTML 和太少的 CSS