垂直文字不居中

Question

我的网站左侧/右侧有垂直文字链接，但它们并不是以页面为中心。我希望左右链接垂直居中！

CSS

[class*="navigation"] .nav-previous, 
[class*="navigation"] .nav-next { 
  position:fixed;
  top: 50%; bottom: 0;
  transform: translateY(-25%);
  text-align: center;
}
[class*="navigation"] .nav-next { left: 0px; }
[class*="navigation"] .nav-previous { right: 0px;}
[class*="navigation"] .nav-previous a,
[class*="navigation"] .nav-next a {
  position: absolute;
  text-transform: uppercase;
  display: inline-block;
  color: #4d4d4d;
  white-space: nowrap;
  background-color: #fff;
  padding: 15px 15px 10px 15px;
}
[class*="navigation"] .nav-previous a { 
  right: 0;
  transform-origin: top right;
  transform:rotate(-90deg);     
}
[class*="navigation"] .nav-next a { 
  left: 0; 
  transform-origin: top left;
  transform:rotate(90deg); 
}

输出

编辑：html是通过Wordpress生成的，但输出是

<nav id="nav-BN" class="post-navigation" role="navigation">
   <div class="nav-previous">
      <a rel="prev" href="http://localhost/wordpress/?p=224">
   </div>

   <div class="nav-next">
      <a rel="next" href="http://localhost/wordpress/?p=413">
   </div>
 </nav>

Answer 1

两种方式：

1. 将transform-origin和右.cnt{ position: flex; align-items:center; min-height:100vh; }添加到您的转换中。看看这支笔：http://codepen.io/SamP/pen/PzWeMo

2. 您可以在容器上使用flexbox。确保要与容器对齐的子元素不是绝对的：

{{1}}

Answer 2

您可以flexbox使用align-items:center加height:100% body,html来body, html { height: 100%; margin: 0; background: black; } nav { display: flex; justify-content: space-between; align-items: center; height: 100% } a { display: block; padding: 5px; background: white; text-align: center; position: relative } [class$="next"] a { transform: rotate(-270deg); right: -5px } [class$="previous"] a { transform: rotate(270deg); left: -18px }垂直对齐按钮。

<nav id="nav-BN" class="post-navigation" role="navigation">
  <div class="nav-previous">
    <a rel="prev" href="http://localhost/wordpress/?p=224">Previous</a>
  </div>

  <div class="nav-next">
    <a rel="next" href="http://localhost/wordpress/?p=413">Next</a>
  </div>
</nav>

{{1}}