Differences

This shows you the differences between two versions of the page.

--- devwiki:html [2022/07/08 02:08] – [Responsive Design] ying
+++ devwiki:html [2023/02/07 18:21] (current) – [HTML5 Elements (Widgets)] ying
@@ Line 26: / Line 26: @@
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
@@ Line 142: / Line 143: @@
 </code>
+** center image in div**
+  * horizontal center image, just put div text-align as center <code css>.div_name{ text-align: center; } </code>
+  * another way is to put image to respond to div center, margin itself, and it need to be block not inline to have margin <code css>.img_name{ margin: auto; display: block;} </code>
+  * 3rd method is to use latest div tech, flex, put div as flex<code css>
+.div_name{
+    display: flex;
+    justify-content: center;
+}
+</code>
+  * in 3rd method, as it is like hbox default, those elements inside div is like widget in UI, to align those widgets together, set align-items in .div_name <code css>
+.div_name{
+    display: flex;
+    justify-content: center;
+    align-items: center; /* flex-start: align top, flex-end: align btm; */
+}
+</code>
 ====== HTML 5 - Interactive Charts and Canvas ======