Kann nicht horizontal ausrichten Knopf

Question

Ich habe eine harte Zeit, einen Knopf zu bekommen, um in meinem div. Zu zentrieren. Ich kann es nach links ausrichten, aber wenn ich es zentriere, wird es nach rechts verschoben. Wenn ich es richtig ausrichtet, richtet es sich nach dem Container aus.

https://jsfiddle.net/u0dn2onv/

HTML

<div class="flip-container" ontouchstart="this.classList.toggle('focus');"> 
    <div class="flipper"> 
    <div class="front"> 
    </div> 
    <div class="back"> 
     <div class="centerize"> 

     <a href="#" class="button" data-featherlight="#bio-brian">Jane's Bio</a> 
     <div class="socicon-style"> 
      <a href="imdb.com"> 
      <span class="socicon-imdb"> 
     </span> 
      </a> 
     </div> 
     <div class="back-title">Jane Doe</div> 
     <div class="role">CEO</div> 


     </div> 
    </div> 
    </div> 

CSS

.flip-container { 
    -webkit-perspective: 1000; 
    -moz-perspective: 1000; 
    -o-perspective: 1000; 
    perspective: 1000; 
} 

.flip-container:hover .flipper, 
.flip-container.hover .flipper { 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 

.flip-container, 
.front, 
.back { 
    width: 100%; 
    min-height: 100%; 
    max-width: 100%; 
    max-height: 100%; 
    height: 0; 
    padding-bottom: 70%; 
} 

.flipper { 
    -webkit-transition: 0.6s; 
    -webkit-transform-style: preserve-3d; 
    -moz-transition: 0.6s; 
    -moz-transform-style: preserve-3d; 
    -o-transition: 0.6s; 
    -o-transform-style: preserve-3d; 
    transition: 0.6s; 
    transform-style: preserve-3d; 
    position: relative; 
} 

.front, 
.back { 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -o-backface-visibility: hidden; 
    backface-visibility: hidden; 
    position: absolute; 
    top: 0; 
    left: 100; 
} 

.front { 
    background: url(http://pghpeople.com/wordpress/wp-content/uploads/2014/01/pittsburgh_headshot_f01a.jpg); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: 50% 50%; 
} 

.back { 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
    background: #bd2d2c; 
} 

.socicon-style { 
    :link { 
    color: #fff; 
    } 
    :hover { 
    color: #ebebeb; 
    } 
    text-decoration:none; 
    font-size: 3em; 
    position: absolute; 
    bottom: 6%; 
    left: 0%; 
    right: 0%; 
    text-align: center; 
} 

.back-title { 
    color: #fff; 
    font-size: 2em; 
    position: absolute; 
    top: 14%; 
    left: 0%; 
    right: 0%; 
    text-align: center; 
} 

.role { 
    color: #fff; 
    font-size: 1.5em; 
    position: absolute; 
    top: 30%; 
    left: 0%; 
    right: 0%; 
    text-align: center; 
} 

.button { 
    border: none; 
    padding: 1em 2em; 
    text-decoration: none; 
    position: absolute; 
    font-size: .9em; 
    -webkit-transition-duration: 0.2s; 
    /* Safari */ 
    transition-duration: 0.2s; 
    cursor: pointer; 
    font-family: proxima-nova; 
    font-weight: 600; 
    letter-spacing: .1em; 
    border-radius: .2em; 
    top: 50%; 
} 

.centerize { 
    text-align: right; 
} 

.button { 
    background-color: white; 
    color: #bd2d2c !important; 
    text-transform: uppercase; 
    text-decoration: none; 
} 

.button:hover { 
    background-color: rgba(255, 255, 255, .9); 
    color: rgba(189, 45, 44, 1); 
    text-decoration: none; 
} 

Answer 1

versuchen, diesehttps://jsfiddle.net/u0dn2onv/1/

.button { 
    border: medium none; 
    border-radius: 0.2em; 
    cursor: pointer; 
    font-family: proxima-nova; 
    font-size: 0.9em; 
    font-weight: 600; 
    letter-spacing: 0.1em; 
    padding: 1em 2em; 
    text-decoration: none; 
    transition-duration: 0.2s; 
} 

.centerize { 
    margin-top: 25px; 
    text-align: center; 
} 

Answer 2

U muss etwas versuchen, um den Knopf zu zentrieren. Zum Beispiel Position absolut, oben/links 50%, übersetzen -50%

.flip-container { 
 
    -webkit-perspective: 1000; 
 
    -moz-perspective: 1000; 
 
    -o-perspective: 1000; 
 
    perspective: 1000; 
 
} 
 

 
.flip-container:hover .flipper, 
 
.flip-container.hover .flipper { 
 
    -webkit-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
} 
 

 
.flip-container, 
 
.front, 
 
.back { 
 
    width: 100%; 
 
    min-height: 100%; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    height: 0; 
 
    padding-bottom: 70%; 
 
} 
 

 
.flipper { 
 
    -webkit-transition: 0.6s; 
 
    -webkit-transform-style: preserve-3d; 
 
    -moz-transition: 0.6s; 
 
    -moz-transform-style: preserve-3d; 
 
    -o-transition: 0.6s; 
 
    -o-transform-style: preserve-3d; 
 
    transition: 0.6s; 
 
    transform-style: preserve-3d; 
 
    position: relative; 
 
} 
 

 
.front, 
 
.back { 
 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    -o-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 100; 
 
} 
 

 
.front { 
 
    background: url(http://pghpeople.com/wordpress/wp-content/uploads/2014/01/pittsburgh_headshot_f01a.jpg); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: 50% 50%; 
 
} 
 

 
.back { 
 
    -webkit-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
    background: #bd2d2c; 
 
} 
 

 
.socicon-style { 
 
    :link { 
 
    color: #fff; 
 
    } 
 
    :hover { 
 
    color: #ebebeb; 
 
    } 
 
    text-decoration:none; 
 
    font-size: 3em; 
 
    position: absolute; 
 
    bottom: 6%; 
 
    left: 0%; 
 
    right: 0%; 
 
    text-align: center; 
 
} 
 

 
.back-title { 
 
    color: #fff; 
 
    font-size: 2em; 
 
    position: absolute; 
 
    top: 14%; 
 
    left: 0%; 
 
    right: 0%; 
 
    text-align: center; 
 
} 
 

 
.role { 
 
    color: #fff; 
 
    font-size: 1.5em; 
 
    position: absolute; 
 
    top: 30%; 
 
    left: 0%; 
 
    right: 0%; 
 
    text-align: center; 
 
} 
 

 
.button { 
 
    border: none; 
 
    padding: 1em 2em; 
 
    text-decoration: none; 
 
    font-size: .9em; 
 
    -webkit-transition-duration: 0.2s; 
 
    /* Safari */ 
 
    transition-duration: 0.2s; 
 
    cursor: pointer; 
 
    font-family: proxima-nova; 
 
    font-weight: 600; 
 
    letter-spacing: .1em; 
 
    border-radius: .2em; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.centerize { 
 
    text-align: right; 
 
    display: flex; 
 
} 
 

 
.button { 
 
    background-color: white; 
 
    color: #bd2d2c !important; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
} 
 

 
.button:hover { 
 
    background-color: rgba(255, 255, 255, .9); 
 
    color: rgba(189, 45, 44, 1); 
 
    text-decoration: none; 
 
}

<div class="flip-container" ontouchstart="this.classList.toggle('focus');"> 
 
    <div class="flipper"> 
 
    <div class="front"> 
 
    </div> 
 
    <div class="back"> 
 
     <div class="centerize"> 
 

 
     <a href="#" class="button" data-featherlight="#bio-brian">Jane's Bio</a> 
 
     <div class="socicon-style"> 
 
      <a href="imdb.com"> 
 
      <span class="socicon-imdb"> 
 
\t \t </span> 
 
      </a> 
 
     </div> 
 
     <div class="back-title">Jane Doe</div> 
 
     <div class="role">CEO</div> 
 

 

 
     </div> 
 
    </div> 
 
    </div>

Answer 3

mit diesem Code Versuchen

https://jsfiddle.net/u0dn2onv/5/

.button { 
    border: none; 
    padding: 1em 2em; 
    text-decoration: none; 
    position: absolute; 
    font-size: .9em; 
    -webkit-transition-duration: 0.2s; 
    /* Safari */ 
    transition-duration: 0.2s; 
    cursor: pointer; 
    font-family: proxima-nova; 
    font-weight: 600; 
    letter-spacing: .1em; 
    border-radius: .2em; 
    top: 50%; 
} 

.centerize { 
    margin: calc(50% - 70px); 
} 

ich eigentlich nicht wissen, die Breite des weißen Containers, so dass es eher eine Treffer- und Test-basierte Verkalkung war, aber die Logik ist, dass Sie 50% Marge t hinzufügen o der Behälter und subtrahieren Sie dann die halbe Breite des Contanier, dann wird es in der Mitte platziert.

Syntax:

margin:clac(50% - **half the width of the conatiner**);