Some CSS Tricks

May 20, 2018

Some css tricks I’ve learned:

• Containing an image within a div
• Centering an image
• Div expand to floated content
• Target all except first child

Containing an image within a div:

.div-containing-img {
  overflow:hidden; 
}
.div-containing-img>img {
  /* set width */
  width: 100%;
  max-width: 20em;

Centering an image:

.image-to-center {
  display: block;
  margin: auto;
}

Div expand to floated content:

.div-to-expand {
  display: inline-block;
  line-height: 50px; 
  /* if you need to vertically align text as well,
   you only need to set line-height */
}

Target all except first child:

grandmother>mother *:not(:first-child) {
  
}

⬆ back to top