按钮有一个讨厌的中心问题

时间:2018-01-28 19:43:49

标签: html css centering

我希望将“视图”按钮集中在我的“书写和项目”页面上,面向人像的移动设备上。但是,我无法让这个工作。次优,我一直在使用translateX作为一个bandaid解决方案;但是,这不能在多个屏幕宽度上完成工作。这是我目前的代码:

<div class="image-button-wrapper">
   <div class="image-button sqs-dynamic-text">
      <div class="image-button-inner">
         <a href="...">View</a>
      </div>
   </div>
</div>

@media screen and (max-width: 414px) { 
   .image-button-wrapper { 
      max-width: 150px; 
         transform: translateX(56%); 
         }}

到目前为止,我所能想到的中心技巧都没有被证明有效:margin: 0 auto;text-align: center;等等。有没有人知道如何解决应该是一个简单的问题?

提前致谢!

泰勒

1 个答案:

答案 0 :(得分:0)

我认为问题并不是很难做到,而是因为有很多不同的做法,视情况而定,很难知道要达到的目标。

例如水平未知宽度:

使用它:

.image-button-wrapper {
  width:100%;
  height:100vh;
  position:relative
}
.image-button-inner {
  width: 100%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  position: absolute;
  left: 50%;
  padding: 20px;
  resize: both;
  overflow: auto;
  max-width: 150px;
  text-align: center;
}
<div class="image-button-wrapper">
   <div class="image-button sqs-dynamic-text">
      <div class="image-button-inner">
         <a href="...">View</a>
      </div>
    </div>
</div>

垂直使用:

.image-button-wrapper ,.image-button.sqs-dynamic-text{
  width:100%;
  height:100vh;
  position:relative
}
.image-button-inner {
  width: 100%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  position: absolute;
  top: 50%;
  resize: both;
  overflow: auto;
  max-width: 150px;
  text-align: center;
  display:table;
  vertical-align:center;
}
<div class="image-button-wrapper">
   <div class="image-button sqs-dynamic-text">
      <div class="image-button-inner">
         <a href="...">View</a>
      </div>
    </div>
</div>

两种用途:

.image-button-wrapper ,.image-button.sqs-dynamic-text{
  width:100%;
  height:100vh;
  position:relative
}

.image-button-inner {
  width: 100%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
  position: absolute;
  left: 50%;
  top:50%;
  padding: 20px;
  resize: both;
  overflow: auto;
  max-width: 150px;
  text-align: center;
}
<div class="image-button-wrapper">
   <div class="image-button sqs-dynamic-text">
      <div class="image-button-inner">
         <a href="...">View</a>
      </div>
    </div>
</div>

要了解更多信息,这就是使用transform:translate(-50%)的原因:

enter image description here