Question

首先，我很抱歉我创建了这个新问题，但我现在一直在寻找这个菜单/导航的一段时间，它贴在html页面的正确中心。一个示例就像您可以在此页面左侧看到的社交插件：http://www.addthis.com/social-buttons

我希望与我自己的图像类似，从而导致不同的html页面。希望有人可以提供帮助。

Answer 1

将其应用于菜单的容器div：

.menu {
  position: fixed;
  right: 0px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

Answer 2

您可以使用一些CSS3普通定位（如轴转换属性）来执行此操作，但我认为最好的方法是使用Flexbox。

只需在元素周围创建一个容器，并为其提供以下属性：

.container {
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-line-pack: center;
  align-content: center;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

你的元素将在.container div的范围内。

这是前缀版本，这就是为什么这么长的原因。

建立一个坚持中心HTML的右侧菜单

2 个答案: