Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Thursday, January 23, 2014

align text vertical center in div with css

Basic:
#box { height: 90px; line-height: 90px; }

A more versatile approach:
div { width: 250px; height: 100px; line-height: 100px; text-align: center; }
 span { display: inline-block; vertical-align: middle; line-height: normal; }

Display Table: 

div { display: table; width: 250px; height: 100px; text-align: center; }
span { display: table-cell; vertical-align: middle; }

Friday, January 17, 2014

Body image background

img#background {
 height: 100%; width: 100%; z-index: -1; position:absolute; color: white; 
 min-height: 100%;
 min-width: 1024px;
 width: 100%;
 height: auto;
 position: fixed;
 top: 0;
 left: 0;
}
 
<img id="background" src="image-location" alt="Background-image"> 

Thursday, January 09, 2014

Unblod text in safari

-webkit-font-smoothing: antialiased;

Friday, May 04, 2012

sup css to adjust font

sup{ font-size:11px; font-weight:normal ; height: 0; line-height: 1; vertical-align:top; _vertical-align: bottom; position: relative; }

Friday, June 10, 2011

CSS wide layout

to make the background going to wide of the site of any size of browser.

#wrapper{
width:100%; min-width:1200px;
position:relative;
}

Wednesday, March 30, 2011

CSS hacks and techniques

http://www.catswhocode.com/blog/10-astonishing-css-hacks-and-techniques

Tuesday, March 22, 2011

Centering (horizontally and vertically) an image in a div box

<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: ...;
height: ...;
}
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style><![endif]-->

And that’s the relevant HTML

<div class="wraptocenter"><span></span><img src="..." alt="..."></div>

http://www.brunildo.org/test/img_center.html

Friday, March 11, 2011

CSS Opacity

/* for IE */
filter:alpha(opacity=85) !important;
/* CSS3 standard */
opacity: 0.8;
-moz-opacity:1;
position:relative;

Sunday, January 16, 2011

CSS Minimum Height

height:400px;
height:auto !important;

min-height:400px;

Wednesday, January 06, 2010

css Div height 100%

html {MIN-HEIGHT: 100%; HEIGHT: 100%}

body{
HEIGHT: 100%
}

#container{
min-height: 100%;
_height: 100%;
}