0.4.x/test/vertical-center.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\r
   2 <html xmlns:v="urn:schemas-microsoft-com:vml"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
   3 <head>\r
   4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
   5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
   6         <meta http-equiv="Content-Language" content="ja">\r
   7         <meta http-equiv="Content-Script-Type" content="text/javascript">\r
   8         <meta http-equiv="Content-Style-Type" content="text/css">\r
   9         <meta http-equiv="imagetoolbar" content="no">\r
  10         <link rel="stylesheet" type="text/css" href="../stylesheets/common.css">\r
  11         <!-- InstanceBeginEditable name="doctitle" -->\r
  12         <title>上下中央配置テスト vertical-align:middle</title>\r
  13         <!-- InstanceEndEditable -->\r
  14         <!-- InstanceBeginEditable name="head" -->\r
  15         <style type="text/css">\r
  16                 .test-wrapper {\r
  17                         margin: 20px auto;\r
  18                 }\r
  19         \r
  20                 div.outer {\r
  21                         display:                        table;                  /* ① */\r
  22                         height:                         100px;\r
  23                         width:                          100px;                  /* ② */\r
  24                         background:                     #E3F2DA;\r
  25                         color:                          #5C5C5C;\r
  26                         border:                         1px solid #003366;\r
  27                 }\r
  28                         * html div.outer {\r
  29                                 position:                       relative;       /* ③ */\r
  30                         }\r
  31                         *+html div.outer {\r
  32                                 position:                       relative;       /* ③ */\r
  33                         }\r
  34                 div.vertical_middle {\r
  35                         display:                        table-cell;             /* ④ */\r
  36                         vertical-align:         middle;                 /* ⑤ */\r
  37                 }\r
  38                         * html div.vertical_middle {\r
  39                                 position:                       absolute;       /* ⑥ */\r
  40                                 top:                            50%;            /* ⑥ */\r
  41                         }\r
  42                         *+html div.vertical_middle {\r
  43                                 position:                       absolute;       /* ⑥ */\r
  44                                 top:                            50%;            /* ⑥ */\r
  45                         }\r
  46                 div.vertical_middle p.inner {\r
  47                         margin:                         0 !important;\r
  48                         padding:                        0 !important;\r
  49                 }\r
  50                         * html div.vertical_middle p.inner {\r
  51                                 position:                       relative;       /* ⑦ */\r
  52                                 top:                            -50%;           /* ⑦ */\r
  53                         }\r
  54                         *+html div.vertical_middle p.inner {\r
  55                                 position:                       relative;       /* ⑦ */\r
  56                                 top:                            -50%;           /* ⑦ */\r
  57                         }\r
  58                 \r
  59                 div.table {\r
  60                         display:                        table;\r
  61                         height:                         100px;\r
  62                         background:                     #E3F2DA;\r
  63                         color:                          #5C5C5C;\r
  64                 }\r
  65                         div.table-cell {\r
  66                                 display:                        table-cell;\r
  67                                 vertical-align:         middle;\r
  68                                 width:                          100px;\r
  69                                 border:                         1px solid #003366;\r
  70                                 padding:                        5px;\r
  71                         }\r
  72                                 div.table-cell span.inner {\r
  73                                         display:                        block;\r
  74                                 }\r
  75                 \r
  76                 div.table-ie {\r
  77                         height:                         100px;\r
  78                         background:                     #E3F2DA;\r
  79                         color:                          #5C5C5C;\r
  80                 }\r
  81                         div.table-cell-ie {\r
  82                                 display:                inline;\r
  83                                 zoom:                   1;\r
  84                         }\r
  85                                 div.middle-outer {\r
  86                                         height:                 100px;\r
  87                                         width:                  100px;\r
  88                                         position:               relative;\r
  89                                         border:                 1px solid #003366;\r
  90                                 }\r
  91                                         div.middle-inner {\r
  92                                                 position:               absolute;\r
  93                                                 top:                    50%;\r
  94                                         }\r
  95                                                 div.middle-inner span.inner {\r
  96                                                         display:                inline;\r
  97                                                         position:               relative;\r
  98                                                         top:                    -50%;                   \r
  99                                                 }\r
 100                                 \r
 101                                 \r
 102                 /* http://e2designer.seesaa.net/article/152168876.html */\r
 103                 /* http://perishablepress.com/press/2010/06/01/wrapping-content/ */\r
 104                 .word-wrap {\r
 105                         white-space: pre;           /* CSS 2.0 */\r
 106                         white-space: pre-wrap;      /* CSS 2.1 */\r
 107                         white-space: pre-line;      /* CSS 3.0 */\r
 108                         white-space: -pre-wrap;     /* Opera 4-6 */\r
 109                         white-space: -o-pre-wrap;   /* Opera 7 */\r
 110                         white-space: -moz-pre-wrap; /* Mozilla */\r
 111                         white-space: -hp-pre-wrap;  /* HP Printers */\r
 112                         word-wrap:   break-word;    /* IE 5+ */\r
 113                 }\r
 114                 div.table-cell span.word-wrap {\r
 115                         width:          100px;\r
 116                 }\r
 117                 \r
 118                 \r
 119                 div.wrap {\r
 120                         border: 1px solid #666666;\r
 121                         width: 350px;\r
 122                 }\r
 123                 \r
 124                 div.wrap div {\r
 125                         display: table-cell;\r
 126                         width: 100px;\r
 127                         vertical-align: middle; \r
 128                         font-size: 0.8em;\r
 129                 }\r
 130                 div.wrap div.box1 {\r
 131                         background-color: #FFDDDD;\r
 132                 }\r
 133                 div.wrap div.box2 {\r
 134                         background-color: #DDFFDD;\r
 135                 }\r
 136                 \r
 137                 /* IE 6 */\r
 138                 * html div.wrap div {\r
 139                         display: inline;\r
 140                         zoom: 1;\r
 141                 }\r
 142                 \r
 143                 /* IE 7 */\r
 144                 *:first-child+html div.wrap div {\r
 145                         display: inline;\r
 146                         zoom: 1;\r
 147                 }\r
 148                 \r
 149                 /*\*//*/\r
 150                 * html div.wrap div {\r
 151                         display:inline-block;\r
 152                 }\r
 153                 /**/\r
 154         \r
 155         </style>\r
 156         <!-- InstanceEndEditable -->\r
 157 </head>\r
 158 \r
 159 <body>\r
 160     <div id="general-content">\r
 161         <div id="outer-wrapper">\r
 162             \r
 163             <div id="header">\r
 164                 <div class="base-content-width" style="position:relative;">\r
 165                     <h1><a href="../index.html">pettanR</a></h1>\r
 166                 <!-- global navi -->\r
 167                     <div id="global-navi">\r
 168                         <noscript id="noscript-alert">You need to have JavaScript enabled.</noscript>\r
 169                     </div>\r
 170                 </div>\r
 171             </div>\r
 172             \r
 173             <div id="inner-wrapper" class="base-content-width">\r
 174                                 <!-- InstanceBeginEditable name="main_content" -->\r
 175                                 <div id="main">\r
 176                                         <div id="breadcrumb"><a href="index.html">テスト インデックス</a> &gt; 上下中央配置テスト vertical-align:middle</div>\r
 177                                         <h2>上下中央配置テスト vertical-align:middle</h2>\r
 178                                         <p>上下中央配置をクロスブラウザで table タグ無しで行うテストhttp://scuderia-web.com/tips/xhtml_css/div_vertical_align.php</p>\r
 179                                         <h3>1行で中央配置</h3>\r
 180                                         <div class="test-wrapper clearfix">\r
 181                                                 <div class="outer">  \r
 182                                                         <div class="vertical_middle">  \r
 183                                                                 <p class="inner">テキスト</p>  \r
 184                                                         </div>  \r
 185                                                 </div>\r
 186                                         </div>\r
 187                                         <div class="test-wrapper clearfix">\r
 188                                                 <div class="outer">  \r
 189                                                         <div class="vertical_middle">  \r
 190                                                                 <p class="inner">テキスト<br>テキスト</p>  \r
 191                                                         </div>  \r
 192                                                 </div>\r
 193                                         </div>\r
 194                                         <div class="test-wrapper clearfix">\r
 195                                                 <div class="outer">  \r
 196                                                         <div class="vertical_middle">  \r
 197                                                                 <p class="inner">テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト</p>  \r
 198                                                         </div>  \r
 199                                                 </div>                                                                                  \r
 200                                         </div>\r
 201 \r
 202                                         <h2>上下中央配置テスト</h2>\r
 203                                         \r
 204                                         <h3>上下中央配置したブロックを横に並べる for modern browser</h3>\r
 205                                         <p>ie8, firefox3.6, </p>\r
 206                                         <div class="test-wrapper">\r
 207                                                 <div class="table">  \r
 208                                                         <div class="table-cell">  \r
 209                                                                 <span class="inner">テキスト</span>  \r
 210                                                         </div>\r
 211                                                         <div class="table-cell">  \r
 212                                                                 <span class="inner">テキスト<br>テキスト</span>  \r
 213                                                         </div>\r
 214                                                         <div class="table-cell">  \r
 215                                                                 <span class="inner">テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト</span>  \r
 216                                                         </div>\r
 217                                                         <div class="table-cell">  \r
 218                                                                 <span class="inner word-wrap">word-break, word-wrap text. 1111111111111111111111111111111111111111111111111111111111111111111111111</span>\r
 219                                                         </div>\r
 220                                                         <div class="table-cell">  \r
 221                                                                 <span class="inner">this cell will break. 11111111111111111111111111111111111</span>\r
 222                                                         </div> \r
 223                                                 </div>\r
 224                                         </div>\r
 225                                         <h3>上下中央配置したブロックを横に並べる for IE</h3>\r
 226                                         <p>ie5.5, ie6, ie7</p>\r
 227                                         <div class="test-wrapper">\r
 228                                                 <div class="table-ie">\r
 229                                                         <div class="table-cell-ie">\r
 230                                                                 <div class="middle-outer">  \r
 231                                                                         <div class="middle-inner">  \r
 232                                                                                 <span class="inner">テキスト</span> \r
 233                                                                         </div>\r
 234                                                                 </div>\r
 235                                                         </div>\r
 236                                                         <div class="table-cell-ie">\r
 237                                                                 <div class="middle-outer">  \r
 238                                                                         <div class="middle-inner">  \r
 239                                                                                 <span class="inner">テキスト<br>テキスト</span> \r
 240                                                                         </div>\r
 241                                                                 </div>\r
 242                                                         </div>\r
 243                                                         <div class="table-cell-ie">\r
 244                                                                 <div class="middle-outer">  \r
 245                                                                         <div class="middle-inner">  \r
 246                                                                                 <span class="inner">テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト</span>\r
 247                                                                         </div>\r
 248                                                                 </div>\r
 249                                                         </div>\r
 250                                                         <div class="table-cell-ie">\r
 251                                                                 <div class="middle-outer">  \r
 252                                                                         <div class="middle-inner">  \r
 253                                                                                 <span class="inner word-wrap">word-break, word-wrap text. 1111111111111111111111111111111111111111111111111111111111111111111111111</span>\r
 254                                                                         </div>\r
 255                                                                 </div>\r
 256                                                         </div>\r
 257                                                         <div class="table-cell-ie">\r
 258                                                                 <div class="middle-outer">  \r
 259                                                                         <div class="middle-inner">  \r
 260                                                                                 <span class="inner">this cell will break. 11111111111111111111111111111111111</span>\r
 261                                                                         </div>\r
 262                                                                 </div>\r
 263                                                         </div>\r
 264                                                 </div>\r
 265                                         </div>\r
 266                                         \r
 267                                         <div style="height:420px;"></div>\r
 268                                         \r
 269                                         <h2>上下中央配置テスト</h2>\r
 270                                         http://www.webbibo.com/blog/htmlcss/vertical/125.html\r
 271                                         <div class="wrap">\r
 272                                                 <div class="box1">\r
 273                                                         ボックス1<br>\r
 274                                                         ボックス1<br>\r
 275                                                         ボックス1<br>\r
 276                                                         ボックス1<br>\r
 277                                                         ボックス1\r
 278                                                 </div>\r
 279                                                 <div class="box2">\r
 280                                                         ボックス2<br>\r
 281                                                         ボックス2\r
 282                                                 </div>\r
 283                                         </div>\r
 284 \r
 285                                 </div>\r
 286                                 <!-- InstanceEndEditable -->\r
 287             </div>\r
 288         </div>\r
 289     </div>\r
 290     \r
 291     <div id="footer-content"><!-- #BeginLibraryItem "/Library/footer.lbi" -->\r
 292 \r
 293         <div id="footer">\r
 294             <div id="footer-item-container" class="base-content-width clearfix">\r
 295                 <div class="footer-item-wrapper">\r
 296                     <div class="footer-item">\r
 297                         <h2>ぺったんR にようこそ</h2>\r
 298                         <ul>\r
 299                             <li>サンプル</li>\r
 300                             <li>ぺったんRの特徴</li>\r
 301                             <li>沿革</li>\r
 302                         </ul>\r
 303                         <h2>Test</h2>\r
 304                         <ul>\r
 305                             <li><a href="index.html">Test Index</a></li>\r
 306                         </ul>\r
 307                     </div>\r
 308                 </div>\r
 309                 <div class="footer-item-wrapper">\r
 310                     <div class="footer-item">\r
 311                         <h2>ドキュメント</h2>\r
 312                         <ul>\r
 313                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForAuthors" rel="me" target="_blank">作家向けドキュメント</a></li>\r
 314                             <li>絵師向けドキュメント</li>                                                     \r
 315                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForDevelopers" rel="me" target="_blank">開発者向けドキュメント</a></li>\r
 316                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForWebmasters" rel="me" target="_blank">編集長向けドキュメント</a></li>\r
 317                         </ul>\r
 318                     </div>\r
 319                 </div>\r
 320                 <div class="footer-item-wrapper">\r
 321                     <div class="footer-item">\r
 322                         <h2>プロトタイプ</h2>\r
 323                         <ul>\r
 324                             <li><a href="http://pettanr.heroku.com/" rel="me" target="_blank">pettanr.heroku.com</a></li>\r
 325                             <li><a href="../work.html" rel="console">ユーザーコンソール</a></li>\r
 326                         </ul>\r
 327                         <h2>Ajax contents</h2>\r
 328                         <ul>\r
 329                             <li><a href="../help/jp.xml">help | jp</a></li>\r
 330                         </ul>\r
 331                     </div>\r
 332                 </div>\r
 333                 <div class="footer-item-wrapper" style="width:170px;">\r
 334                     <div class="footer-item" style="padding-right:0;">\r
 335                         <h2>ぺったんRチーム</h2>\r
 336                         <ul>\r
 337                             <li>わたしたちについて</li>\r
 338                             <li>ミッション</li>\r
 339                             <li><a href="../diary/itozyun.xml">itozyun's diary</a></li>\r
 340                             <li>個人情報保護方針</li>\r
 341                             <li>作品の取り扱い</li>\r
 342                             <li>お問い合わせ</li>\r
 343                         </ul>\r
 344                     </div>\r
 345                 </div>\r
 346             </div>\r
 347             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>\r
 348         </div><!-- #EndLibraryItem -->\r
 349         </div>\r
 350         <script type="text/javascript">\r
 351                 var has_server_support = false;\r
 352         </script>\r
 353         <script type="text/javascript" src="../javascripts/common.js"></script>\r
 354 <!-- InstanceBeginEditable name="script" --><!-- InstanceEndEditable -->\r
 355 </body>\r
 356 <!-- InstanceEnd --></html>\r