Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by John Issa
John Issa
1,798 Points

Centering text within an image

Hello everyone,

I'm creating a sales dashboard for my company and I'm encountering an issue when trying to center text onto an image. I'm able to get the text close to the center but not close enough to avoid the odd-looking alignment.

I've included my code below and would gladly appreciate any guidance.

Thank you in advance!

<!doctype html>
<html>
<head>
    <title></title>

<style type="text/css">

        @font-face {
    font-family: 'Whitney';
    }

    table.center {
    margin-left:auto;
    margin-right:auto;
  }


    .leaderboard-cell{
      padding: 2px 60px;
      vertical-align: middle;
      color: #01C0B1;
      font-size: 140%;
      font-family: "Whitney";
      position: center;

    }

    h1{
      display: block;
      font-family: "Whitney";
      text-align: center;
      font-size: 50px;
      color: #00bfb3;
    }


    .leaderboard-count1{
      background: url(https://s3-us-west-2.amazonaws.com/dwy-testing/Asset+8.png) no-repeat;
      background-position:center;
      background-size: 150px;
    }


  </style>

</head>

<body class="leaderboard-background">
<body>

<h1 align="justify">Sales <br/> Scorecard</h1>

  <div class="leaderboard-list">
    <table class="center">
      <tbody>
        <tr class="leaderboard-item">
        <td class="leaderboard-cell leaderboard-rank"> <img src="https://s3-us-west-2.amazonaws.com/dwy-testing/Asset+10.png" alt="" style="width:120px; height:auto;"></td>
        <td class="leaderboard-cell leaderboard-team">First Place</td>

        <td class="leaderboard-cell leaderboard-count1"><h2>25</h2></td>

  </body>
</html>

1 Answer

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

You weren't specific, but I'm guessing that you want to center the number "25" in the circle.

The main issue is that in the image with the circle, the circle is not centered to begin with. I've reproduced the original image below with side borders to illustrate this:

bar circle bar

I was able to compensate for the offset image by using this setting in the CSS:

  background-position: -4px center;