CSS notes

position

refer to: http://learnlayout.com/position.html

make some boxes the same height

refer to: https://github.com/liabru/jquery-match-height

clearfix

.clearfix {
    content: "";
    display: table;
    clear: both;
}

vertically center an image

refer to: http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div

HTML:

<div class="frame">
  <img src="foo"/>
</div>

CSS:

.frame {  
    height: 160px; /*can be anything*/
    width: 160px; /*can be anything*/
    position: relative;
}
img {  
    max-height: 100%;  
    max-width: 100%; 
    width: auto;
    height: auto;
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
}

hacks

Firefox only css rules

@-moz-document url-prefix() { #button{ color: red; } }

tricks

line before and after centered text

http://stackoverflow.com/questions/23584120/line-before-and-after-title-over-image