2016-06-25 32 views
0

Ich habe vertikale Links links/rechts von meiner Website, aber sie sind nicht zentriert auf der Seite. Ich möchte den rechten und linken Link vertikal zentrieren!vertikaler Text nicht zentriert

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 wird durch Wordpress erzeugt, aber die Ausgabe ist

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

und Ihre HTML ist? – dippas

+1

Dies ist kein minimales vollständiges Beispiel, da HTML nicht vorhanden ist. http://StackOverflow.com/Help/Mcve –

+0

HTML zu der Frage hinzugefügt. Wie bereits erwähnt, wurde es durch Wordpress-Posts und die functions.php generiert. – user3550879

Antwort

2

Zwei Möglichkeiten:

  1. hinzufügen translateY und das Recht transform-origin auf Ihre Transformationen. Schauen Sie sich diesen Stift an: http://codepen.io/SamP/pen/PzWeMo

  2. Sie können flexbox auf Ihrem Container verwenden. Achten Sie darauf, die Kinder Elemente, die Sie mit dem Behälter ausgerichtet werden sollen nicht absolut positioniert sind:

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

+0

das funktioniert, scheint es die einfachste/einfache Antwort zu sein – user3550879

0

Sie flexbox mit align-items:center Plus height:100% in body,html auf vertikale align die Tasten verwenden können.

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>

+0

die Seite scrollt zwar, wird dies beeinflussen das? Es gibt scrollbaren Inhalt – user3550879

+0

nop wird das nicht beeinflussen – dippas