CODEWITHSUNDEEP
htmlcss
user3550879
user3550879

Reputation: 3469

vertical text not centering

I have text links vertically on the left/right of my website but they aren't centering on the page. I want the right and left link to vertically center!

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

Output

enter image description here

EDIT: html is generated through Wordpress but the output is

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

Upvotes: 0

Views: 58

Answers (1)

Sam Pakvis
Sam Pakvis

Reputation: 189

Two ways:

  1. Add translateY and the right transform-origin to your transforms. Check out this pen: http://codepen.io/SamP/pen/PzWeMo

  2. You can use flexbox on your container. Make sure the children elements you want aligned to the container are not positioned absolute:

.cnt{ position: flex; align-items:center; min-height:100vh; }

Upvotes: 2

Related Questions