user3550879 user3550879 - 1 year ago 52
HTML Question

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!


[class*="navigation"] .nav-previous,
[class*="navigation"] .nav-next {
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;
[class*="navigation"] .nav-next a {
left: 0;
transform-origin: top left;


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 class="nav-next">
<a rel="next" href="http://localhost/wordpress/?p=413">

Answer Source

Two ways:

  1. Add translateY and the right transform-origin to your transforms. Check out this pen:

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

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