matthewcopeland/known-size-rotate

## known-size-rotate
<!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>
      .container {
      position: absolute;
      top: 50%;
      margin-left: -125px; /* move it back up half the width */
      left: 50%;
      margin-top: -25px; /* half of the height */
      width: 250px;
      height: 50px;

      line-height: 50px;
      vertical-align: middle;
      -webkit-transform: rotate(-90deg);
      background: hotpink;
      text-align: center;
      }

      .text {
      border: 1px solid #000;
      white-space: nowrap;
      }
    </style>
  </head>
  <body>

    <div class="container">
      <div class="text">My text that I need to rotate</div>
    </div>

  </body>
</html>
	<!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>
	.container {
	position: absolute;
	top: 50%;
	margin-left: -125px; /* move it back up half the width */
	left: 50%;
	margin-top: -25px; /* half of the height */
	width: 250px;
	height: 50px;

	line-height: 50px;
	vertical-align: middle;
	-webkit-transform: rotate(-90deg);
	background: hotpink;
	text-align: center;
	}

	.text {
	border: 1px solid #000;
	white-space: nowrap;
	}
	</style>
	</head>
	<body>

	<div class="container">
	<div class="text">My text that I need to rotate</div>
	</div>

	</body>
	</html>