텍스트 정렬 속성

10 months ago · 17f32d9809
parent 1cb357d5e9
commit 17f32d9809
1 changed files with 38 additions and 0 deletions
--- a/style/2-5/default.html
+++ b/style/2-5/default.html
@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width"/>
+    <style>
+        h2 {
+            text-align: center;
+        }
+
+        .img-middle {
+            vertical-align: middle;
+            margin: 10px;
+        }
+
+        .img-top {
+            vertical-align: top;
+            margin: 10px;
+        }
+
+        .img-bottom {
+            vertical-align: bottom;
+            margin: 10px;
+        }
+    </style>
+</head>
+<body>
+    <h2>CSS text-image align</h2>
+    vertical-align:top
+    <img class="img-top" src="https://cdn3.iconfinder.com/data/icons/logos-brands-3/24/logo_brand_brands_logos_total_commander-256.png">
+    <hr>
+    vertical-align:middle
+    <img class="img-middle" src="https://cdn3.iconfinder.com/data/icons/logos-brands-3/24/logo_brand_brands_logos_total_commander-256.png">
+    <hr>
+    vertical-align:bottom
+    <img class="img-bottom" src="https://cdn3.iconfinder.com/data/icons/logos-brands-3/24/logo_brand_brands_logos_total_commander-256.png">
+</body>
+</html>