Skip to content

Instantly share code, notes, and snippets.

@matthewcopeland

matthewcopeland/center rotate unknown

Created June 26, 2012 16:59
Show Gist options
  • Save matthewcopeland/2997121 to your computer and use it in GitHub Desktop.
Save matthewcopeland/2997121 to your computer and use it in GitHub Desktop.
Download ZIP
rotate an unknown element and center
Raw
center rotate unknown
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Renaud rotates</title>
<!-- always start with a css reset because browsers are evil -->
<link rel="stylesheet" type="text/css" href="https://raw.github.com/matthewcopeland/css/master/reset.css" />
<style>
html, body {
padding: 0;
margin: 0;
min-height: 100%;
height: 100%;
width: 100%;
position: relative;
}
.container {
display: table;
position: relative;
height: 100%;
width: 100%;
background: hotpink;
text-align: center;
}
.text {
display: table-cell;
border: 1px solid #000;
line-height: 50px;
vertical-align: middle;
-webkit-transform: rotate(-90deg);
white-space: nowrap;
}
</style>
</head>
<body>
<div class="container">
<div class="text">My text that I need to rotate</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment