Question

我一直在使用CSS将图像始终放在页面中间，但现在我想要6个链接到图像的左边，6个链接到图像的右边。随着页面大小的改变，我希望这三个都留在页面中间。

我不确定我是否需要3张桌子或1张桌子，中间只有一排？我认为1表会更容易，但是我可以在第一列中有6行，第二列中有1行（图像占据了大部分行）和第3列中有6行吗？一旦我设置了表格，我就需要它们浮动在页面中间。

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

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

Answer 1

如果显示：flex很好，则不需要表格：

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

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

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

1 个答案: