Tekst in gecentreerde tekst in tabbladen verpakken

Ik ben op zoek naar voorbeelden van css-tabbladen met tekst in de verpakking en de tekst is zowel verticaal als horizontaal gecentreerd. Iets zoals dit:

  • |    This is     |                 |
  • | a very long | Short title |
  • |   tab title     |                 |

Ik zou graag willen weten of dit kan worden gedaan met een eenvoudige ul-li-a-knooppunthiërarchie of dat ik extra lagen moet opnemen (bijvoorbeeld div of span). Ik heb een cross-browseroplossing nodig (IE 7+, Firefox, Chrome, Safari).

0
@yurenaghm thx, maar mijn behoefte is om de tekst in de tabbladen te centreren, niet om het menu te centreren.
toegevoegd de auteur Christophe, de bron
Ik vond hier veel voorbeelden van gecentreerde tabbladen matthewjamestaylor.com/centered-menus/# . Ik hoop dat het je helpt :)
toegevoegd de auteur yurenaghm, de bron

2 antwoord

Dit is een van de momenten waarop een tafel het beste aansluit bij uw doel. Dit is de winstmarge.

<table class="titles">
    <tbody>
        <tr>
            <td>This is a long title.</td>
            <td>Short.</td>
            <td>This is an annoyingly long title.</td>
        </tr>
    </tbody>
</table>

En hier is de CSS.


Met deze eenvoudige mark-up kon ik verticaal en horizontaal gecentreerde tabs bereiken.

1
toegevoegd
Heb je een voorbeeld?
toegevoegd de auteur Christophe, de bron
+1 tx voor de update. Ik heb een antwoord geplaatst waarmee je kunt profiteren van de eigenschappen van de tabelweergave terwijl je de ongeordende lijst behoudt.
toegevoegd de auteur Christophe, de bron
en misschien blok op het ankertag met een vaste breedte weergeven
toegevoegd de auteur Joseph Marikle, de bron

Stylingtabs is geen gemakkelijke taak. Voor mijn specifieke behoefte, kwam ik erachter dat het gebruik van display: table op het ul element en display: table-cell op de li-elementen een bevredigend resultaat gaf (hoewel niet ondersteund door oudere browsers).

0
toegevoegd