Question

这似乎几乎不可能。

我正在尝试创建仅限HTML / CSS的方形链接按钮，文本居中，不使用CSS3。

我尝试过在inline-block中找到关于垂直居中文本的每个答案的变体，但我尝试的任何内容都没有达到以下约束：

整个按钮元素必须是链接，而不仅仅是文本。
如果按钮元素的宽度不够宽，则按钮元素内的文本必须是垂直和水平中心，并且要很好地包裹。
所有按钮的高度和宽度应相同。
如果浏览器的宽度减小或不足以适合所有按钮，则按钮必须水平并排放置并包裹到下一行。
为确保与旧浏览器兼容，此解决方案必须不需要CSS3（例如display:flex）。

想想iOS和Android主屏幕上的并排方形按钮，但使用简单纯粹的HTML / CSS。阴影，渐变，反射都不是必需的，只是按钮结构。

我已尝试使用:before嵌套div作为垂直对齐inline-block内文字的技巧，我尝试使用display:table行和单元格，我甚至试过display:flex但是使用了CSS3。我试过的解决方案都没有符合上述所有标准。

所以我想知道，如果没有CSS3，这甚至可能吗？如果是这样的话，那么我认为这样的事情会非常直接地完成吗？

Answer 1

是的，我相信这是可能的，但它使用了很多嵌套的跨度！

这里使用的最疯狂的CSS是display: table和display: inline-block，所以我认为你应该非常安全。

body {
  font-family: sans-serif;
}
.special-button {
  display: inline-block;
  height: 100px;
  width: 100px;
  overflow: hidden;
  position: relative;
  background: #eee;
  color: #333;
  text-decoration: none;
}
.special-button:hover {
  background: #333;
  color: #fff;
}
.special-button-table {
  display: table;
  width: 100%;
  height: 100%;
}
.special-button-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 10px;
}

<a href="#" class="special-button">
  <span class="special-button-table">
    <span class="special-button-cell">Text Here</span>
  </span>
</a>

<a href="#" class="special-button">
  <span class="special-button-table">
    <span class="special-button-cell">Longer Text Item Here</span>
  </span>
</a>

<a href="#" class="special-button">
  <span class="special-button-table">
    <span class="special-button-cell">Text Here</span>
  </span>
</a>

<a href="#" class="special-button">
  <span class="special-button-table">
    <span class="special-button-cell">Really Really Long Text Item That Overflows Here</span>
  </span>
</a>

Answer 2

由于非常快速的读取，我可能错过了一些细节 - 让我知道这有多远。

<style>
    .ios li {
        display: inline-block;
        background: #eee;
        padding: 5% 10px 20px 10px;
        width: 100px;
        max-width: 100px;
        height: 50px;
        max-height: 100px;
        vertical-align: top;
        text-align: center;
    }
</style>


<ul class="ios">
    <a href="test.com"><li>short text</li></a>
    <a href="test2.com"><li>much longer lot of text</li></a>
</ul>

如何使用纯HTML和CSS2模仿Android / iOS方形按钮？

2 个答案: