SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.


    Code:
    <!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>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    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' ...

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

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

    e.g.
    Code:
    <!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);
    	width:100px;
    	height:100px;
    	display:table-cell;
    	vertical-align:middle;
    	text-align:center;
    }
    </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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •