Note that there are some explanatory texts on larger screens.

plurals
  1. POPlacing a vertical rotated text inside a div
    primarykey
    data
    text
    <blockquote> <p><strong>Possible Duplicate:</strong><br> <a href="https://stackoverflow.com/questions/1080792/how-to-draw-vertical-text-with-css-cross-browser">How to draw vertical text with CSS cross-browser?</a> </p> </blockquote> <p>I have some divs, supposed to be "books" on a shelf. All the div is supposed to be a link, and while in some cases they will have image backgrounds, in some others they won't and in those cases I need to put the title like if it was, well, a book, so the text should be rotated 90º. I'm not sure how to do that, rotate just the text inside the <code>&lt;a&gt;</code>, without rotating the entire div.</p> <pre><code>&lt;div class="magazinebookcase"&gt; &lt;div class="books"&gt; &lt;a title="Mag1" style="height:286px;width:16px;" href=""&gt;Book 1 &lt;/a&gt; &lt;/div&gt; &lt;div class="books"&gt; &lt;a title="Mag2" style="height:258px;width:48px;" href=""&gt;Book 2 &lt;/a&gt; &lt;/div&gt; &lt;div class="books"&gt; &lt;a title="Mag3" style="height:252px;width:38px;" href=""&gt; &lt;/a&gt; &lt;/div&gt; &lt;div class="books"&gt; &lt;a title="Mag4" style="height:258px;width:50px;" href=""&gt; &lt;/a&gt; &lt;/div&gt; &lt;div class="books"&gt; &lt;a title="Mag5" style="height:284px;width:14px;" href=""&gt; &lt;/a&gt; &lt;/div&gt; &lt;div class="clearfix"&gt;&lt;/div&gt; </code></pre> <p></p> <p>And the CSS:</p> <pre><code>.magazinebookcase { width: 100%; padding: 3px; vertical-align:bottom; } .magazinebookcase .clearfix { clear:both; } .magazinebookcase .books { text-align:center; display: table-cell; vertical-align: bottom; } .magazinebookcase a { border: 1px solid #000; display: block; word-break: break-all; } .magazinebookcase a:hover { background-color: #ccc; }​ </code></pre> <p><a href="http://jsfiddle.net/7vEdw/2/" rel="nofollow noreferrer">http://jsfiddle.net/7vEdw/2/</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload