Testo in verticale e centrato nella cella

**KillerWorm** · 19-04-2016, 14:03

Ciao, si può trovare una "semplice" soluzione usando flexbox.
Non ti nascondo però che trovo il tuo codice abbastanza ridondante e poco ottimale, già per il fatto che funziona solo su IE (anche se per te non è un problema).

Io lo rivedrei completamente.
Ti posto una delle prove che ho fatto. Ho usato chiaramente flexbox (che non funziona su vecchie versioni di IE) e ho rivisto l'intera struttura html separandola, inoltre, dal css (come è sempre consigliabile fare).

Puoi modificare le varie proprietà del css per personalizzare caratteri, colori, bordi, dimensioni e quant'altro, come meglio credi.
Non ho avuto tempo di commentare il codice ma, se hai bisogno di chiarimenti, chiedi pure.
Vedi intanto se può andarti bene come soluzione.

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Etichette 6.5 x 146 mm</title>
    <meta charset="utf-8">
    <style type="text/css">
      body{
        margin: 20mm 0 0 15mm;
      }
      .etichette, .etichette li{
        border: dotted #999;
        margin: 0;
        padding: 0;
        float: left;
        box-sizing: border-box;
      }
      .etichette li{
        width: 6.5mm;
        height: 146mm;
        border-width: 0 0 0 1px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .etichette b{
        font: bold 12pt/120% Arial;
        border: 1px solid #88d;
        border-radius: 5px;
        width: 3mm;
        padding: 3mm .5mm;
        word-wrap: break-word;
        white-space: pre-wrap;
        display: block;
      }
      .etichette{
        border-width: 1px 1px 1px 0;
        list-style: none;
      }
    </style>
  </head>
  <body title="Clicca per stampare">
    <ul class="etichette">
      <li><b>1</b>
      <li><b>02</b>
      <li><b>003</b>
      <li><b>100004</b>
      <li><b>100005<br><br>*<br>A</b>
      <li><b>100006</b>
      <li><b>100007</b>
      <li><b>100008</b>
      <li><b>100009</b>
      <li><b>100010</b>
      <li><b>100011</b>
      <li><b>100012</b>
      <li><b>100013</b>
      <li><b>100014</b>
      <li><b>100015</b>
      <li><b>100016</b>
      <li><b>100017</b>
      <li><b>100018</b>
      <li><b>100019</b>
      <li><b>100020</b>
      <li><b>100021</b>
      <li><b>100022</b>
      <li><b>100023</b>
      <li><b>100024</b>
      <li><b>100025</b>
      <li><b>100026</b>
      <li><b>100027</b>
      <li><b>100028</b>
      <li><b>100029</b>
      <li><b>100030</b>
      <li><b>100031</b>
      <li><b>100032</b>
      <li><b>100033</b>
      <li><b>100034</b>
      <li><b>100035</b>
      <li><b>100036</b>
      <li><b>100037</b>
      <li><b>100038</b>
      <li><b>100039</b>
      <li><b>100040</b>
    </ul>
  </body>
</html>

EDIT:
@carlomarangoni, scusami, non avevo visto la tua risposta quando ho postato.

Discussione: Testo in verticale e centrato nella cella

Strumenti discussione

Ricerca discussione

Visualizza

Visualizzazione discussione

Permessi di invio