Centering 2 div items

Question

davecoventry 8 Newbie Poster

9 Years Ago

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.

images web-design

6 Contributors
11 Replies
195 Views
1 Week Discussion Span
Latest Post 9 Years Ago Latest Post by diafol

Recommended Answers

Answered by jKidz 0 in a post from 9 Years Ago

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;
}

Jump to Post

Answered by diafol 3,720 in a post from 9 Years Ago

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; …

Jump to Post

Answered by BMXDad 23 in a post from 9 Years Ago

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;
    }

Jump to Post

All 11 Replies

jKidz 0 Junior Poster in Training

9 Years Ago

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;
}

diafol

9 Years Ago

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

BMXDad 23 Newbie Poster

9 Years Ago

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;
    }

Reply to this topic

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.

davecoventry 8 Newbie Poster · Answer 1 · 2014-06-10T05:36:06+00:00

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>

diafol · Answer 2 · 2014-06-10T07:15:29+00:00

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

davecoventry 8 Newbie Poster · Answer 3 · 2014-06-10T10:27:11+00:00

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

rpv_sen 59 Junior Poster · Answer 4 · 2014-06-10T14:03:13+00:00

rpv_sen 59 Junior Poster

9 Years Ago

You can remove the height in both class.

tapananand 13 Junior Poster · Answer 5 · 2014-06-11T05:05:27+00:00

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.

diafol · Answer 6 · 2014-06-14T08:24:29+00:00

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.

diafol · Answer 7 · 2014-06-14T08:34:12+00:00

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>

diafol · Answer 8 · 2014-06-19T16:43:22+00:00

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

Centering 2 div items

Recommended Answers Collapse Answers

All 11 Replies

Recommended Answers