Diamond with text centered

Hi all

I have a demo here - http://www.ttmt.org.uk/diamond.html

I don’t like doing this but I have something that works but I don’t know of it’s the best way.

I just need a diamond background with text centered horizontally and vertically.

I need to doing this a few times and the text will be a different size in each one.

At the moment I’m positioning the text absolutley and using transform to rotate the background and text.

Is this the simplest way to do this?

Is there a way to center the text without positioning because I’m going to have to position each one separately.


<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">

  <!--css-->

  <style type="text/css">
    *{
      margin:0;
      padding:0;
      font:16px Helvetica, sans-serif;
    }
    .diamond{
      margin:50px;
      width:100px;
      height:100px;
      background:red;
      transform:rotate(45deg);
      -ms-transform:rotate(45deg);
      -webkit-transform:rotate(45deg);
      position:relative;
    }
    .diamond-inner{
      color:#fff;
      font-weight:bold;
      font-size:1.2em;
      line-height:1.4em;
      text-align:center;
      transform:rotate(-45deg);
      -ms-transform:rotate(-45deg);
      -webkit-transform:rotate(-45deg);
      position:absolute;
      top:22px;
      left:5px;
    }
  </style>


  <title>Title of the document</title>
  </head>

<body>

  <div class="diamond">
    <div class="diamond-inner">
      Business Starter
    </div>
  </div>

</body>

</html>

Off Topic:

Do you really mean a ‘diamond’, or do you just mean a square rotated 45 degrees? They aren’t the same thing. Just sayin’ … :slight_smile:

HI,

Use display:table-cell on the child to auto centre the text.

e.g.


<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<!--jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<!--css-->
<link rel="stylesheet" href="css/master.css" />
<style type="text/css">
* {
	margin:0;
	padding:0;
	font:16px Helvetica, sans-serif;
}
.diamond {
	margin:50px;
	width:100px;
	height:100px;
	background:red;
	transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
}
.diamond-inner {
	color:#fff;
	font-weight:bold;
	font-size:1.2em;
	line-height:1.4em;
	text-align:center;
	transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	[B]width:100px;
	height:100px;
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}[/B]
</style>

<!--[if lt IE 9]>
	     <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

<title>Title of the document</title>
</head>
<body>
<div class="diamond">
		<div class="diamond-inner"> Business Starter </div>
</div>
</body>
</html>