Difference between revisions of "Popular syntax"
Jump to navigation
Jump to search
(Replaced content with "== Centering Text Vertically in DIV == HTML Markup <pre> <div class="main"> <div class="right"> <img src="https://picsum.photos/75/150?random=1" alt=""></div> <div class="left"> <p>some text</p></div> </div> </pre> '''CSS Markup''' <pre> .main{ display: flex; align-items: center; } </pre> ---- ==Back To Top- Home - Category==") Tag: Replaced |
|||
| Line 16: | Line 16: | ||
</pre> | </pre> | ||
==Dealing with images== | |||
img{width: 100%} | |||
img{aspect-ratio: 1 / 1; | |||
object-fit: contain;} | |||
or | |||
img{aspect-ratio: 1 / .5;} | |||
---- | ---- | ||
==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Css|Category]]== | ==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Css|Category]]== | ||
Revision as of 17:29, 28 November 2022
Centering Text Vertically in DIV
HTML Markup
<div class="main"> <div class="right"> <img src="https://picsum.photos/75/150?random=1" alt=""></div> <div class="left"> <p>some text</p></div> </div>
CSS Markup
.main{
display: flex;
align-items: center;
}
Dealing with images
img{width: 100%}
img{aspect-ratio: 1 / 1;
object-fit: contain;}
or
img{aspect-ratio: 1 / .5;}