--- /dev/null
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\r
+<html xmlns:v="urn:schemas-microsoft-com:vml"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
+<head>\r
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
+ <meta http-equiv="Content-Language" content="ja">\r
+ <meta http-equiv="Content-Script-Type" content="text/javascript">\r
+ <meta http-equiv="Content-Style-Type" content="text/css">\r
+ <meta http-equiv="imagetoolbar" content="no">\r
+ <link rel="stylesheet" type="text/css" href="../stylesheets/common.css">\r
+ <!-- InstanceBeginEditable name="doctitle" -->\r
+ <title>上下中央配置テスト vertical-align:middle</title>\r
+ <!-- InstanceEndEditable -->\r
+ <!-- InstanceBeginEditable name="head" -->\r
+ <style type="text/css">\r
+ .test-wrapper {\r
+ margin: 20px auto;\r
+ }\r
+ \r
+ div.outer {\r
+ display: table; /* ① */\r
+ height: 100px;\r
+ width: 100px; /* ② */\r
+ background: #E3F2DA;\r
+ color: #5C5C5C;\r
+ border: 1px solid #003366;\r
+ }\r
+ * html div.outer {\r
+ position: relative; /* ③ */\r
+ }\r
+ *+html div.outer {\r
+ position: relative; /* ③ */\r
+ }\r
+ div.vertical_middle {\r
+ display: table-cell; /* ④ */\r
+ vertical-align: middle; /* ⑤ */\r
+ }\r
+ * html div.vertical_middle {\r
+ position: absolute; /* ⑥ */\r
+ top: 50%; /* ⑥ */\r
+ }\r
+ *+html div.vertical_middle {\r
+ position: absolute; /* ⑥ */\r
+ top: 50%; /* ⑥ */\r
+ }\r
+ div.vertical_middle p.inner {\r
+ margin: 0 !important;\r
+ padding: 0 !important;\r
+ }\r
+ * html div.vertical_middle p.inner {\r
+ position: relative; /* ⑦ */\r
+ top: -50%; /* ⑦ */\r
+ }\r
+ *+html div.vertical_middle p.inner {\r
+ position: relative; /* ⑦ */\r
+ top: -50%; /* ⑦ */\r
+ }\r
+ \r
+ div.table {\r
+ display: table;\r
+ height: 100px;\r
+ background: #E3F2DA;\r
+ color: #5C5C5C;\r
+ }\r
+ div.table-cell {\r
+ display: table-cell;\r
+ vertical-align: middle;\r
+ width: 100px;\r
+ border: 1px solid #003366;\r
+ padding: 5px;\r
+ }\r
+ div.table-cell span.inner {\r
+ display: block;\r
+ }\r
+ \r
+ div.table-ie {\r
+ height: 100px;\r
+ background: #E3F2DA;\r
+ color: #5C5C5C;\r
+ }\r
+ div.table-cell-ie {\r
+ display: inline;\r
+ zoom: 1;\r
+ }\r
+ div.middle-outer {\r
+ height: 100px;\r
+ width: 100px;\r
+ position: relative;\r
+ border: 1px solid #003366;\r
+ }\r
+ div.middle-inner {\r
+ position: absolute;\r
+ top: 50%;\r
+ }\r
+ div.middle-inner span.inner {\r
+ display: inline;\r
+ position: relative;\r
+ top: -50%; \r
+ }\r
+ \r
+ \r
+ /* http://e2designer.seesaa.net/article/152168876.html */\r
+ /* http://perishablepress.com/press/2010/06/01/wrapping-content/ */\r
+ .word-wrap {\r
+ white-space: pre; /* CSS 2.0 */\r
+ white-space: pre-wrap; /* CSS 2.1 */\r
+ white-space: pre-line; /* CSS 3.0 */\r
+ white-space: -pre-wrap; /* Opera 4-6 */\r
+ white-space: -o-pre-wrap; /* Opera 7 */\r
+ white-space: -moz-pre-wrap; /* Mozilla */\r
+ white-space: -hp-pre-wrap; /* HP Printers */\r
+ word-wrap: break-word; /* IE 5+ */\r
+ }\r
+ div.table-cell span.word-wrap {\r
+ width: 100px;\r
+ }\r
+ \r
+ \r
+ div.wrap {\r
+ border: 1px solid #666666;\r
+ width: 350px;\r
+ }\r
+ \r
+ div.wrap div {\r
+ display: table-cell;\r
+ width: 100px;\r
+ vertical-align: middle; \r
+ font-size: 0.8em;\r
+ }\r
+ div.wrap div.box1 {\r
+ background-color: #FFDDDD;\r
+ }\r
+ div.wrap div.box2 {\r
+ background-color: #DDFFDD;\r
+ }\r
+ \r
+ /* IE 6 */\r
+ * html div.wrap div {\r
+ display: inline;\r
+ zoom: 1;\r
+ }\r
+ \r
+ /* IE 7 */\r
+ *:first-child+html div.wrap div {\r
+ display: inline;\r
+ zoom: 1;\r
+ }\r
+ \r
+ /*\*//*/\r
+ * html div.wrap div {\r
+ display:inline-block;\r
+ }\r
+ /**/\r
+ \r
+ </style>\r
+ <!-- InstanceEndEditable -->\r
+</head>\r
+\r
+<body>\r
+ <div id="general-content">\r
+ <div id="outer-wrapper">\r
+ \r
+ <div id="header">\r
+ <div class="base-content-width" style="position:relative;">\r
+ <h1><a href="../index.html">pettanR</a></h1>\r
+ <!-- global navi -->\r
+ <div id="global-navi">\r
+ <noscript id="noscript-alert">You need to have JavaScript enabled.</noscript>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ \r
+ <div id="inner-wrapper" class="base-content-width">\r
+ <!-- InstanceBeginEditable name="main_content" -->\r
+ <div id="main">\r
+ <div id="breadcrumb"><a href="index.html">テスト インデックス</a> > 上下中央配置テスト vertical-align:middle</div>\r
+ <h2>上下中央配置テスト vertical-align:middle</h2>\r
+ <p>上下中央配置をクロスブラウザで table タグ無しで行うテストhttp://scuderia-web.com/tips/xhtml_css/div_vertical_align.php</p>\r
+ <h3>1行で中央配置</h3>\r
+ <div class="test-wrapper clearfix">\r
+ <div class="outer"> \r
+ <div class="vertical_middle"> \r
+ <p class="inner">テキスト</p> \r
+ </div> \r
+ </div>\r
+ </div>\r
+ <div class="test-wrapper clearfix">\r
+ <div class="outer"> \r
+ <div class="vertical_middle"> \r
+ <p class="inner">テキスト<br>テキスト</p> \r
+ </div> \r
+ </div>\r
+ </div>\r
+ <div class="test-wrapper clearfix">\r
+ <div class="outer"> \r
+ <div class="vertical_middle"> \r
+ <p class="inner">テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト</p> \r
+ </div> \r
+ </div> \r
+ </div>\r
+\r
+ <h2>上下中央配置テスト</h2>\r
+ \r
+ <h3>上下中央配置したブロックを横に並べる for modern browser</h3>\r
+ <p>ie8, firefox3.6, </p>\r
+ <div class="test-wrapper">\r
+ <div class="table"> \r
+ <div class="table-cell"> \r
+ <span class="inner">テキスト</span> \r
+ </div>\r
+ <div class="table-cell"> \r
+ <span class="inner">テキスト<br>テキスト</span> \r
+ </div>\r
+ <div class="table-cell"> \r
+ <span class="inner">テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト</span> \r
+ </div>\r
+ <div class="table-cell"> \r
+ <span class="inner word-wrap">word-break, word-wrap text. 1111111111111111111111111111111111111111111111111111111111111111111111111</span>\r
+ </div>\r
+ <div class="table-cell"> \r
+ <span class="inner">this cell will break. 11111111111111111111111111111111111</span>\r
+ </div> \r
+ </div>\r
+ </div>\r
+ <h3>上下中央配置したブロックを横に並べる for IE</h3>\r
+ <p>ie5.5, ie6, ie7</p>\r
+ <div class="test-wrapper">\r
+ <div class="table-ie">\r
+ <div class="table-cell-ie">\r
+ <div class="middle-outer"> \r
+ <div class="middle-inner"> \r
+ <span class="inner">テキスト</span> \r
+ </div>\r
+ </div>\r
+ </div>\r
+ <div class="table-cell-ie">\r
+ <div class="middle-outer"> \r
+ <div class="middle-inner"> \r
+ <span class="inner">テキスト<br>テキスト</span> \r
+ </div>\r
+ </div>\r
+ </div>\r
+ <div class="table-cell-ie">\r
+ <div class="middle-outer"> \r
+ <div class="middle-inner"> \r
+ <span class="inner">テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト</span>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ <div class="table-cell-ie">\r
+ <div class="middle-outer"> \r
+ <div class="middle-inner"> \r
+ <span class="inner word-wrap">word-break, word-wrap text. 1111111111111111111111111111111111111111111111111111111111111111111111111</span>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ <div class="table-cell-ie">\r
+ <div class="middle-outer"> \r
+ <div class="middle-inner"> \r
+ <span class="inner">this cell will break. 11111111111111111111111111111111111</span>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ \r
+ <h2>上下中央配置テスト</h2>\r
+ http://www.webbibo.com/blog/htmlcss/vertical/125.html\r
+ <div class="wrap">\r
+ <div class="box1">\r
+ ボックス1<br>\r
+ ボックス1<br>\r
+ ボックス1<br>\r
+ ボックス1<br>\r
+ ボックス1\r
+ </div>\r
+ <div class="box2">\r
+ ボックス2<br>\r
+ ボックス2\r
+ </div>\r
+ </div>\r
+\r
+ </div>\r
+ <!-- InstanceEndEditable -->\r
+ </div>\r
+ </div>\r
+ </div>\r
+ \r
+ <div id="footer-content"><!-- #BeginLibraryItem "/Library/footer.lbi" -->\r
+\r
+ <div id="footer">\r
+ <div id="footer-item-container" class="base-content-width clearfix">\r
+ <div class="footer-item-wrapper">\r
+ <div class="footer-item">\r
+ <h2>ぺったんR にようこそ</h2>\r
+ <ul>\r
+ <li>サンプル</li>\r
+ <li>ぺったんRの特徴</li>\r
+ <li>沿革</li>\r
+ </ul>\r
+ <h2>Test</h2>\r
+ <ul>\r
+ <li><a href="index.html">Test Index</a></li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ <div class="footer-item-wrapper">\r
+ <div class="footer-item">\r
+ <h2>ドキュメント</h2>\r
+ <ul>\r
+ <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForAuthors" rel="me" target="_blank">作家向けドキュメント</a></li>\r
+ <li>絵師向けドキュメント</li> \r
+ <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForDevelopers" rel="me" target="_blank">開発者向けドキュメント</a></li>\r
+ <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForWebmasters" rel="me" target="_blank">編集長向けドキュメント</a></li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ <div class="footer-item-wrapper">\r
+ <div class="footer-item">\r
+ <h2>プロトタイプ</h2>\r
+ <ul>\r
+ <li><a href="http://pettanr.heroku.com/" rel="me" target="_blank">pettanr.heroku.com</a></li>\r
+ <li><a href="../work.html" rel="console">ユーザーコンソール</a></li>\r
+ </ul>\r
+ <h2>Ajax contents</h2>\r
+ <ul>\r
+ <li><a href="../help/jp.xml">help | jp</a></li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ <div class="footer-item-wrapper" style="width:170px;">\r
+ <div class="footer-item" style="padding-right:0;">\r
+ <h2>ぺったんRチーム</h2>\r
+ <ul>\r
+ <li>わたしたちについて</li>\r
+ <li>ミッション</li>\r
+ <li><a href="../diary/itozyun.xml">itozyun's diary</a></li>\r
+ <li>個人情報保護方針</li>\r
+ <li>作品の取り扱い</li>\r
+ <li>お問い合わせ</li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>\r
+ </div><!-- #EndLibraryItem --></div>\r
+ <script type="text/javascript" src="../javascripts/common.js"></script>\r
+<!-- InstanceBeginEditable name="script" --><!-- InstanceEndEditable -->\r
+</body>\r
+<!-- InstanceEnd --></html>\r
OSDN Git Service
