So I was scrounging the net for the easiest way of both vertical centering a div and rounding its corners.
To my dismay, there are tons of results, but none that are as clean or as simple as I'd like them to be. So, I figured I'd do it myself.
The HTML
First of all, you can download an archive containing the HTML and requisite images and see it for yourself, or you could view a live demo here.
The interesting thing about doing it this way is that it's pretty straight-forward, and doesn't require an overabundance of div elements, nor JavaScript in order to function appropriately--it just puts your images where you want them.
Caveats
There are one or two to point out using this method (which I'm fine with):
Transparency is not maintained
This means you'll have to manually ensure the rounded corner backdrop color matches that of the adjacent element. I have yet to run into a situation where this can't be done.
Images are present in the foreground
Well, unless you need rediculously close text to the edge of your div, this shouldn't be a problem. The rounded corner picture is 25x25 pixels, and a simple padding: 25px; takes care of that nicely.
The Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Centering and Rounding Demo : SWDD</title>
<style type="text/css">
<!--
/* This acts as our primary reset, to override browser defaults */
* {
margin: 0px;
padding: 0px;
font-family: sans-serif;
border: none;
}
/* Our main div we want rounded */
.outside {
/* To vertically and horizontally center the div: */
/* Give dimensions for the div */
height: 250px;
width: 250px;
/* Specify different positioning */
position: absolute;
/* Specify equidistant spacing */
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
/* Specify automatic margining for positioning */
margin: auto;
/* Adjust colors */
background: #eee;
color: #555;
/* Keep text away from the corners */
padding: 25px;
/* For use with centering inner items vertically */
display: table;
}
.inside {
/* To enable vertical centering: */
display: table-cell;
vertical-align: middle;
/* And horizontal centering: */
margin: auto;
text-align: center;
}
/* Stacked classes for use with our images */
.top {
position: absolute;
top: 0px;
}
.bottom {
position: absolute;
bottom: 0px;
}
.right {
right: 0px;
}
.left {
left: 0px;
}
-->
</style>
</head>
<body>
<div class="outside">
<img src="images/top-left.png" alt="img" class="top left" />
<img src="images/top-right.png" alt="img" class="top right"/>
<img src="images/bottom-left.png" alt="img" class="bottom left"/>
<img src="images/bottom-right.png" alt="img" class="bottom right" />
<div class="inside">
<p>A rounded div.</p>
<img src="images/swdd-logo-small.png" alt="SWDD" />
<p>Cool, isn't it?</p>
</div>
</div>
</body>
</html>
Colorize your code.
Got any feedback?
Posts
