Difference between revisions of "Popular syntax"
Jump to navigation
Jump to search
| Line 24: | Line 24: | ||
img{aspect-ratio: 1 / .5;} | img{aspect-ratio: 1 / .5;} | ||
==Media Queries== | |||
/* On screens that are 992px or less, set the background color to blue */ | |||
@media screen and (max-width: 992px) { | |||
body { | |||
background-color: blue; | |||
} | |||
} | |||
---- | ---- | ||
==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Css|Category]]== | ==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Css|Category]]== | ||
Revision as of 17:34, 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;}
Media Queries
/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}