Skip to content

Instantly share code, notes, and snippets.

@shenjunru

shenjunru/center-by-inline-block.html

Created April 2, 2014 05:44
Show Gist options
  • Save shenjunru/9928549 to your computer and use it in GitHub Desktop.
Save shenjunru/9928549 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
center-by-inline-block.html
<!DOCTYPE>
<html>
<head>
<title>Center Element by CSS: inline-block</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.slider .entry {
background: green;
}
.slider .entry .content {
background: red;
}
.slider {
display: block;
overflow: hidden;
position: relative;
margin: 0 auto;
width: 60%;
height: 60%;
}
.slider .entry {
font-size: 0; /* avoid inline space */
text-align: center;
width: 100%;
height: 100%;
}
.slider .entry:before,
.slider .entry .before,
.slider .entry .content {
vertical-align: middle;
/* inline-block */
display: -moz-inline-stack; /* FF2 */
display: inline-block;
*display: inline; /* IE6/7 */
*zoom: 1; /* IE6/7 */
}
.slider .entry:before,
.slider .entry .before {
content: "";
height: 100%;
width: 0;
}
.slider .entry .content {
overflow: hidden;
text-align: left;
min-width: 100px;
min-height: 100px;
max-width: 98%;
max-height: 98%;
/* improve resized image quality in IE */
-ms-interpolation-mode: bicubic;
/* IE6 min/max size*/
_width: expression((this.parentNode.offsetWidth / this.parentNode.offsetHeight) < ((this._width = this._width || this.width) / (this._height = this._height || this.height)) ? Math.max(100, Math.min(0.98 * this.parentNode.offsetWidth, this._width)) + 'px' : 'auto');
_height: expression((this.parentNode.offsetHeight / this.parentNode.offsetWidth) < ((this._height = this._height || this.height) / (this._width = this._width || this.width)) ? Math.max(100, Math.min(0.98 * this.parentNode.offsetHeight, this._height)) + 'px' : 'auto');
}
</style>
</head>
<body>
<ul>
<li>Center element by CSS: inline-block.</li>
<li>Auto resize image with min/max settings.</li>
<li>Oversize sub content will be truncated by wrapper.</li>
<li>compatibility: Internet Explorer 6+, FireFox 2+, Chrome, Safari.</li>
</ul>
<br>
<div class="slider">
<div class="entry" style="left: 0;">
<!--[if lte IE 7]><i class="before"></i><![endif]-->
<img class="content" src="demo-wide.jpg" alt="">
</div>
</div>
<br>
<div class="slider">
<div class="entry" style="left: 0;">
<!--[if lte IE 7]><i class="before"></i><![endif]-->
<img class="content" src="demo-high.jpg" alt="">
</div>
</div>
<br>
<div class="slider">
<div class="entry" style="left: 0;">
<!--[if lte IE 7]><i class="before"></i><![endif]-->
<div class="content">
<div style="width: 30px; height: 100px; background: blue;"></div>
<div style="width: 30px; height: 100px; background: orange;"></div>
<div style="width: 30px; height: 100px; background: lightcoral;"></div>
<div style="width: 30px; height: 100px; background: lightgreen;"></div>
</div>
</div>
</div>
<br>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment