devwiki:html

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
devwiki:html [2023/02/07 16:58] – [HTML5 Elements (Widgets)] yingdevwiki:html [2023/02/07 18:21] (current) – [HTML5 Elements (Widgets)] ying
Line 147: Line 147:
   * horizontal center image, just put div text-align as center <code css>.div_name{ text-align: center; } </code>   * 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>   * 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 ====== ====== HTML 5 - Interactive Charts and Canvas ======
  
  • devwiki/html.txt
  • Last modified: 2023/02/07 18:21
  • by ying