Member Avatar for davecoventry

I have two items that I need to be displayed in the centre of the page.

      <span class="center">
          <div class="ring">1</div><div class="question">Question</div>
      </span>

The CSS is as follows:

    .ring{
      height: 58px;
      width: 58px;
      font-size: 24pt;
      font-weight: bold;
      vertical-align: middle;
      background-image: url("images/ring.png");
    }
    .question{
      font-size: 24pt;    
    }
    .center{
      margin-left: auto;
      margin-right: auto;  
    }

What I'm hoping to see is the graphic below:
1c4d16e5f0555de95a4e509c3d2ce6d0

What I'm actually getting is the screenshot below:
15cab1b1430721e5434de3bbb510b651

I've tried various permutations, but I can't seem to get the two items to line up in the center.

  • 6 Contributors
  • 11 Replies
  • 196 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by diafol
Member Avatar for jKidz

Try this and tell me.
If this fail, I will give you another solution.

.ring{
float: left;
height: 58px;
width: 58px;
font-size: 24pt;
font-weight: bold;
vertical-align: middle;
background-image: url("images/ring.png");
}

.question{
float :right
font-size: 24pt;
float: left;
height: 58px;
}
Member Avatar for davecoventry

Thanks for your help.

Your CSS gives the result as shown below:

5605d3ee79c4142bc32be2e2dc3b48db

:+(

I think the solution is to probably put them into a table.

      <span class="center">
          <table align="center">
                <tr>
                    <td><div class="ring">1</div></td>
                    <td><div class="question">Question</div></td>
                </tr>
            </table>
      </span>
Member Avatar for diafol

Why are you placing a block element inside an inline element. It just doesn't make sense.

Member Avatar for davecoventry

Yes. The span is redundant. I just left it in as a reference to my earlier css code.

Member Avatar for rpv_sen

You can remove the height in both class.

Member Avatar for tapananand

Try these minor changes:
1. Change your span to a div.
2. Add <br class="clear"/> after your two divs inside(just to clear floats).
3. Add these lines to your CSS:

.center{
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    }
    div.center div
    {
        float:left;
    }
    .clear
    {
        clear:both;
    }

The 500 width will depend on your setup, apply some mathematics to center it properly inside the element containing it.

Edited by tapananand because: Clarification
Member Avatar for diafol

Have you tried using a border radius for the number element ? Overlapping elements can become unstuck, depending on the method you use. The border is an integral part of an element so it should work well.

Member Avatar for diafol

Example...

/*....*/

.ring span:first-child{
    border: #cccccc 2px solid; /*whatever colour*/
    border-radius: 10px;
    display:inline-block;
    width: 20px;
    height: 20px;   
    text-align: center;
}

</style>
</head>

<body>
    <div class="ring">
       <span>1</span>
       <span>Question</span>
    </div>
Member Avatar for diafol

I use rems, because I'm on Chrome, but use units that are widely supported if you want...

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
body{
    background-color:#CC0000;   
    font-size: 60px;
}
.ring{
    color:white;
    text-align: center; 
}

.ring span:first-child{
    border: white 4px solid;
    border-radius: 3rem;
    display:inline-block;
    width: 4.5rem;
    height: 4.5rem; 
    text-align: center;
}
</style>
</head>

<body>
    <div class="ring">
       <span>1</span>
       <span>Question</span>
    </div>    
</body>
</html>

81af757e8afec6ce42b98675114628fd

Member Avatar for BMXDad

diafol ... nicely done.

I'd make a small change though (visual stuff):

    body{
        font-size: 60px;
    }
    .ring{
        color:white;
        text-align: center;
        background-color:#CC0000;
        padding: 5px;
    }
Member Avatar for diafol

Ah. Front end ain't really my stuff, so thanks for the tip :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.