CSS Vertical Align Div with CSS Table and Flexbox

Glenn Glenn's Blog 0 Comments

A straightforward approach with CSS Table This approach has been around for ages, but is still rarely used over absolute div positioning. We simply add CSS table to the parent div and table-cell to the child div to be centred:- [css] .vertical-container { display: table; } .vertically-centered { display: table-cell; vertical-align: middle; margin: auto; /* optional */ float: none; /* optional */ …

CSS Class Contains

Glenn Glenn's Blog 0 Comments

Sometime you have classes like ‘myclass-1″ “myclass-2” and this may often be the case if you are using a WordPress plugin that spews out multiple divs with class names that are incrementally different. That can be a real pain, but thanklsfully you can still target them with a single line of CSS using the ‘CSS3 [attribute*=value] Selector’. Here’s the css:- [css] …

Full Screen Responsive Background Image with CSS

Glenn Glenn's Blog 2 Comments

Here is our CSS for a full-screen responsive background image that uses the css cover property. This means that the background image is full-screen, but also that it dynamically adjusts/crops so that there is no image distortion:- Basic CSS3 Implementation [css] body { background: url(“your-image.jpg”) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } [/css] Here …