Forums

phristopher

<!doctype html>
<html>

<head>
  <style type="text/css">
    #container {
      background: yellow;
      width: 500px;
      height: 30px;
      text-align: center;
      position: relative;
      }
    #line {
      border-bottom: black;
      border-bottom-style: solid;
      height: 50%;
      width: 100%;
      }
    #category {
      width: 100%;
      position: absolute;
      text-align: center; 
      top: 0;
      }
    h2 { 
      margin: 0;
      background-color: yellow;
      width: intrinsic;
      padding: 0 10px;
      }
  </style>
</head>

<body>
  <div id="container">

    <div id="line"></div>

    <div id="category">

        <h2>TYPOGRAPHY</h2>

    </div>

  </div>
</body>

</html>

Hello css experts! I need your help please! What I'm trying to achieve is centering the h2 tag within the div, but the alignment seems to reset after I insert the "width:intrinsic" in h2.

What I'm trying to achieve is something that looks like this:

---------------- TYPOGRAPHY ----------------

Centered text with line through the back that expands with the surround div. Is my above code the best way to approach this? If so, how do I center the h2 tag while using the "width:intrinsic" property?

-Phristopher

phristopher

Haha okay I just posted this 10 minutes ago and solved it myself.

Centering with margin is what I should have been doing instead of relying on text-align: center. Duh! pats self on back

      margin: 0 auto;

treehouse : what would you like to learn today?

Forums

[Solved] Help centering element that uses css 'width:intrinsic;'