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

Question

This seems almost impossible.

I am trying to create HTML/CSS-only square link buttons with text centered inside and without using CSS3.

I have tried variations of every answer I could find about vertically-centering text in an inline-block , but nothing that I try fulfills the following constraints:

1. The entire button element must be a link, not just the text.
2. The text inside the button element must be vertically and horizontally-center and wrap nicely if the width of the button element is not wide enough.
3. The height and width of all buttons should be the same.
4. The buttons must be placeable side-by-side horizontally and wrap to the next line below if the width of the browser is reduced or not enough to fit all buttons.
5. To ensure compatibility with older browsers, this solution must not require CSS3 (eg display:flex ).

Think something like the side-by-side square buttons on the iOS and Android home screens but using simple and pure HTML/CSS. The shadowing, gradients, reflections aren't necessary, just the button structures.

I've tried nested divs using :before as a trick to vertically-align the text within an inline-block , I've tried using display:table with rows and cells, and I've even tried display:flex but that uses CSS3. No solution I tried fits all the criteria above.

So I'm wondering, is this even possible without CSS3? If so, what's the trick as I would have thought something like this would have been very straightforward to accomplish?

Answer 1

Yes, I believe this is possible, but it uses a lot of nested spans!

The craziest CSS used here is display: table and display: inline-block , so I think you should be pretty safe.

 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

Ive possibly missed some details due to a very quick skim read - let me know how far off this is.

<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>