无法水平对齐按钮

时间：2016-08-06 11:20:54

标签： jquery html css

我很难在我的div中找到一个按钮。我可以让它左对齐，但是当我将它对齐时，它会向右移动。当我对齐它时，它会对齐过容器。

higherEntry(K key)

HTML 

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

CSS 

$controller

3 个答案:

答案 0 :(得分：1)

试试这个 https://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;
}

答案 1 :(得分：0)

你必须尝试一些过程才能将按钮移动到中心位置。例如，绝对位置，上/下50％，平移-50％

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

尝试使用此代码

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

var x[],matrix[],n;
...
n = (matrix = x) && matrix.length;

我实际上并不知道白色容器的宽度，所以它更像是一个基于命中和试验的计算，但逻辑是你向容器添加50％的边距，然后减去一半的宽度，所以然后它将放在中心。

语法：

.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); 
}
相关问题
最新问题