按钮有一个令人讨厌的居中问题答案

【问题标题】：Have a Pesky Centering Issue With Button按钮有一个令人讨厌的居中问题
【发布时间】：2018-01-29 04:07:48
【问题描述】：

我想在面向纵向的移动设备上将我的作品和项目页面上的“查看”按钮居中。但是，我不能完全让它工作。次优，我一直使用 translateX 作为创可贴解决方案；但是，这并不能在多个屏幕宽度上完成工作。这是我当前的代码：

<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; 等。有人知道如何解决应该是一个简单的问题吗？

提前致谢！

泰勒

【问题讨论】：

我建议您在此处添加完整的 HTML/CSS 作为代码 sn-p，因为正如他们所说，代码 sn-p 值一千字。
这里不多说了。你能提供html和更多css的结束标签吗？
@Dejan.S 添加了结束标签。你们能澄清一下还有什么可能有帮助的吗？除了模板可能附带的内容之外，我没有为按钮编写 CSS。我可以追捕它。
你需要媒体查询做什么？没有它，它工作得很好。 .image-button-wrapper {text-align: center} 本身就可以解决问题。因此，如果您可以提供为什么需要媒体查询的上下文，那就太好了。
@Mister Lister 我需要查询，因为我只希望在该屏幕尺寸下水平居中。当翻转到横向或平板电脑/台式机屏幕时，默认放置是因为布局不会降级到堆栈。

标签： html css centering

【解决方案1】：

我认为问题不在于它很难做到，而在于它有很多不同的方法，根据情况，很难知道该去哪一个。

例如对于水平未知宽度：

使用这个：

.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%) 的原因：

【讨论】：