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:56] – [HTML5 Elements (Widgets)] yingdevwiki:html [2023/02/07 18:21] (current) – [HTML5 Elements (Widgets)] ying
Line 146: Line 146:
 ** center image in div** ** center image in div**
   * 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>
 +  * 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.1675788972.txt.gz
  • Last modified: 2023/02/07 16:56
  • by ying