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