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
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
21 display: table; /* ① */
\r
23 width: 100px; /* ② */
\r
24 background: #E3F2DA;
\r
26 border: 1px solid #003366;
\r
29 position: relative; /* ③ */
\r
32 position: relative; /* ③ */
\r
34 div.vertical_middle {
\r
35 display: table-cell; /* ④ */
\r
36 vertical-align: middle; /* ⑤ */
\r
38 * html div.vertical_middle {
\r
39 position: absolute; /* ⑥ */
\r
42 *+html div.vertical_middle {
\r
43 position: absolute; /* ⑥ */
\r
46 div.vertical_middle p.inner {
\r
47 margin: 0 !important;
\r
48 padding: 0 !important;
\r
50 * html div.vertical_middle p.inner {
\r
51 position: relative; /* ⑦ */
\r
54 *+html div.vertical_middle p.inner {
\r
55 position: relative; /* ⑦ */
\r
62 background: #E3F2DA;
\r
66 display: table-cell;
\r
67 vertical-align: middle;
\r
69 border: 1px solid #003366;
\r
72 div.table-cell span.inner {
\r
78 background: #E3F2DA;
\r
89 border: 1px solid #003366;
\r
95 div.middle-inner span.inner {
\r
102 /* http://e2designer.seesaa.net/article/152168876.html */
\r
103 /* http://perishablepress.com/press/2010/06/01/wrapping-content/ */
\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
114 div.table-cell span.word-wrap {
\r
120 border: 1px solid #666666;
\r
125 display: table-cell;
\r
127 vertical-align: middle;
\r
130 div.wrap div.box1 {
\r
131 background-color: #FFDDDD;
\r
133 div.wrap div.box2 {
\r
134 background-color: #DDFFDD;
\r
138 * html div.wrap div {
\r
144 *:first-child+html div.wrap div {
\r
150 * html div.wrap div {
\r
151 display:inline-block;
\r
156 <!-- InstanceEndEditable -->
\r
160 <div id="general-content">
\r
161 <div id="outer-wrapper">
\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
173 <div id="inner-wrapper" class="base-content-width">
\r
174 <!-- InstanceBeginEditable name="main_content" -->
\r
176 <div id="breadcrumb"><a href="index.html">テスト インデックス</a> > 上下中央配置テスト 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
180 <div class="test-wrapper clearfix">
\r
181 <div class="outer">
\r
182 <div class="vertical_middle">
\r
183 <p class="inner">テキスト</p>
\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
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
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
211 <div class="table-cell">
\r
212 <span class="inner">テキスト<br>テキスト</span>
\r
214 <div class="table-cell">
\r
215 <span class="inner">テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト</span>
\r
217 <div class="table-cell">
\r
218 <span class="inner word-wrap">word-break, word-wrap text. 1111111111111111111111111111111111111111111111111111111111111111111111111</span>
\r
220 <div class="table-cell">
\r
221 <span class="inner">this cell will break. 11111111111111111111111111111111111</span>
\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
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
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
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
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
267 <div style="height:420px;"></div>
\r
270 http://www.webbibo.com/blog/htmlcss/vertical/125.html
\r
286 <!-- InstanceEndEditable -->
\r
291 <div id="footer-content"><!-- #BeginLibraryItem "/Library/footer.lbi" -->
\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
305 <li><a href="index.html">Test Index</a></li>
\r
309 <div class="footer-item-wrapper">
\r
310 <div class="footer-item">
\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
320 <div class="footer-item-wrapper">
\r
321 <div class="footer-item">
\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
327 <h2>Ajax contents</h2>
\r
329 <li><a href="../help/jp.xml">help | jp</a></li>
\r
333 <div class="footer-item-wrapper" style="width:170px;">
\r
334 <div class="footer-item" style="padding-right:0;">
\r
339 <li><a href="../diary/itozyun.xml">itozyun's diary</a></li>
\r
347 <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>
\r
348 </div><!-- #EndLibraryItem -->
\r
350 <script type="text/javascript">
\r
351 var has_server_support = false;
\r
353 <script type="text/javascript" src="../javascripts/common.js"></script>
\r
354 <!-- InstanceBeginEditable name="script" --><!-- InstanceEndEditable -->
\r
356 <!-- InstanceEnd --></html>
\r