Top One Line Css Tips

The best solutions are often the simplest. Here’s a list of 8 tips that contain only one css property.

1. Vertical centering with line-height


When you have a container with fixed height you can use line-height property to vertically center the content.
Take a look at this demo.

2. Prevent oversized content to break fixed width floated layouts


When oversized content (i.e. wide image) is placed in fixed width floated container, it may break the layout. To prevent that use this trick. It will hide a part of the content but at least your layout structure will remain intact.

3. Prevent line breaks in links


This little trick will prevent line breaks on your links. I recommend using this with long text to avoid having links break into 2 lines.

4. Always show Firefox scrollbar


Firefox hides vertical scrollbar by default. So, when you browse a site that have different page heights you notice a horizontal shift. This code will always display a scrollbar and prevent shifting.

5. Centering block elements horizontally

margin:0 auto;

For all modern browser this line of css is enough to horizontally center a block level element.

6. Remove vertical textarea scrollbar in IE


Textareas in IE have vertical scrollbar visible by default. If you want those removed (I know I do) use this line.

7. Force page breaks when printing your document


With this line of code you can control places where you want your pages to break when printing a document.

8. Remove active link borders

a:active, a:focus{

Originally found here, this will remove dotted outline from focused or active links.

You may also like...