1

我想在博客文章中垂直对齐东亚文本，但不了解 CSS。我希望它看起来像这样https://dl.dropboxusercontent.com/u/444684/OpenWebDemos/css3writingModes/japanese-upright.html。

我试图在我的博客中这样做，但每个字符都是垂直对齐的，而不仅仅是博客文章中的字符。这是我的博客：http ://dandan-koushun.blogspot.com/

你能告诉我有什么问题吗？下面是我的CSS：

<!DOCTYPE html>
<html lang="ja">
<section>
    <meta charset="utf-8" />
    <style>
        html {
            font-size: 10px;
            width: 100%;

        }
        body {
            width: 100%;
            height: 34rem;
            margin-bottom: 8rem;

            -ms-writing-mode: tb-rl; /* old syntax. IE */
            -webkit-writing-mode: vertical-rl;
            -moz-writing-mode: vertical-rl;
            -ms-writing-mode: vertical-rl;
            writing-mode: vertical-rl; /* new syntax */   
        }

        h1 {
            text-shadow: 0 1px 1px grey;
            color: white;
            font-weight: bold;
            font-size: 3rem;
            padding: 11rem 12rem 0 0;    
        }    
        section {
            -ms-writing-mode: tb-rl; /* old syntax. IE */
            -webkit-writing-mode: vertical-rl;
            -moz-writing-mode: vertical-rl;
            -ms-writing-mode: vertical-rl;
            writing-mode: vertical-rl; /* new syntax */

        }


</html>
4

1 回答 1

1

我会做的是使用 CSS3 将 div 旋转 90 度，但他们所做的如下：

ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
-webkit-text-orientation: upright;
-moz-text-orientation: upright;
-ms-text-orientation: upright;
text-orientation: upright;

将其添加到父 div。

于 2015-03-02T02:55:26.467 回答