feat: 增加适用类别

awesomepeng · Mar 13, 2018 · 5487f3a · 5487f3a
1 parent d8cb3c6
commit 5487f3a
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -1,12 +1,13 @@
-# 水平垂直居中
-
-- [lineheight](http://yanhaijing.com/vertical-center/lineheight.html)
+## 仅居中元素定宽高适用：
 - [absolute + 负margin](http://yanhaijing.com/vertical-center/absolute1.html)
 - [absolute + margin auto](http://yanhaijing.com/vertical-center/absolute2.html)
 - [absolute + calc](http://yanhaijing.com/vertical-center/absolute3.html)
+
+## 居中元素不定宽高适用：
 - [absolute + transform](http://yanhaijing.com/vertical-center/absolute4.html)
+- [writing-mode](http://yanhaijing.com/vertical-center/writing-mode.html)
+- [lineheight](http://yanhaijing.com/vertical-center/lineheight.html)
 - [table](http://yanhaijing.com/vertical-center/table.html)
 - [css-table](http://yanhaijing.com/vertical-center/css-table.html)
-- [writing-mode](http://yanhaijing.com/vertical-center/writing-mode.html)
 - [flex](http://yanhaijing.com/vertical-center/flex.html)
-- [grid](http://yanhaijing.com/vertical-center/grid.html)
+- [grid](http://yanhaijing.com/vertical-center/grid.html)
diff --git a/absolute1.html b/absolute1.html
@@ -19,7 +19,7 @@
 </head>
 <body>
     <div class="wp">
-        <div class="box">123123</div>
+        <div class="box size">123123</div>
     </div>
 
     <div class="question">

diff --git a/absolute2.html b/absolute2.html
@@ -20,7 +20,7 @@
 </head>
 <body>
     <div class="wp">
-        <div class="box">123123</div>
+        <div class="box size">123123</div>
     </div>
 
     <div class="question">

diff --git a/absolute3.html b/absolute3.html
@@ -17,7 +17,7 @@
 </head>
 <body>
     <div class="wp">
-        <div class="box">123123</div>
+        <div class="box size">123123</div>
     </div>
 
     <div class="question">

diff --git a/common.css b/common.css
@@ -5,9 +5,12 @@
 }
 
 .box {
+    background: green;    
+}
+
+.box.size{
     width: 100px;
     height: 100px;
-    background: green;
 }
 
 .question {

diff --git a/writing-mode.html b/writing-mode.html
@@ -12,11 +12,13 @@
         .wp-inner {
             writing-mode: horizontal-tb;
             display: inline-block;
-            text-align: left;
+            text-align: center;
             width: 100%;
         }
         .box {
+            display: inline-block;
             margin: auto;
+            text-align: left;
         }
     </style>
 </head>