CODEWITHSUNDEEP
jqueryhtmlcss
user3550879
user3550879

Reputation: 3469

Vertically center rotated divs in viewport (window height)

I have two fixed divs, one on either side of the page.

I've rotated them 90 degrees and managed to get them to the sides.

However I can't get them to vertically center.

Also, I had to define width for the div to get the text to stay on one line, although I'd rather not have a set width because I don't have control of the text content..

.nav-previous, .nav-next { 
  position:fixed;
  top: 0; bottom: 0;
}

.nav-previous { left: 0px; }
.nav-next { right: 0px; }

.nav-previous a, .nav-next a {
  display: inline-block;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: 300px;
  font-size: 1.25em; 
  color: #383838;
  margin: 0; padding: 20px;
}

.nav-previous a { 
  right: 0;
  transform-origin: top right;
  transform:rotate(-90deg);      
}

.nav-next a { 
  left: 0; 
  transform-origin: top left;
  transform:rotate(90deg); 
}
<div class="navigation">
  <div class="nav-previous"><a href="#">previous</a></div>
  <div class="nav-next"><a href="#">next</a></div>
</div>

jsFiddle: https://jsfiddle.net/azizn/3hq6xgL4/

Upvotes: 2

Views: 108

Answers (1)

Pete
Pete

Reputation: 58422

How's this - I have used translate to center the text:

/* this vertically centres the containers */
.navigation .nav-previous, 
.navigation .nav-next { 
  display:inline-block;
  position:fixed;
  top: 50%;
  transform: translateY(-50%);
}

/*this moves the links onto the screen (after the translating and rotating is done*/
.navigation .nav-previous { left: 20px; }
.navigation .nav-next { right: 20px; }

.navigation .nav-previous a,
.navigation .nav-next a {
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.25em; 
  color: #383838;
  margin: 0; 
  padding: 20px;
  transform-origin: center;      
}

.navigation .nav-previous a{
  transform: translate(-50%, 0) rotate(90deg); /* move left 50% before rotating*/
}
.navigation .nav-next a {
  transform: translate(50%, 0) rotate(90deg); /* move right 50% before rotating*/
}

/* styles below to show it is centered */
html,
body {height:100%; padding:0; margin:0;}
body:after {content:''; height:50%; background:blue; display:block;}
<div class="navigation">
  <div class="nav-previous"><a href="3">previous</a></div>
  <div class="nav-next"><a href="#">next</a></div>
</div>

Upvotes: 1

Related Questions