Centering a circle in a square

If this is all the same size, how come the circle isn’t in the middle of the square?

Code:

<div style=";width:148px;height:148px;border:1px solid #000;border-radius:50%;">
  <div style="width:148px;height:148px;border:1px solid red"></div>
</div>

Padding doesn’t seem to work.

I think this works:

Adding:
display: table-cell; vertical-align: middle;


<div style=";width:148px;height:148px;border:1px solid #000;border-radius:50%;display: table-cell; vertical-align: middle;">
  <div style="width:148px;height:148px;border:1px solid red"></div>
</div>

Actually, that doesn’t exactly work cause it won’t allow me to make the circle smaller.

1 Like

You can make the box smaller, but it will not be centered. The last time I looked, it was a block element; therefore, it requires {margin:0 auto} to center it horizontally.

Hi there asasass,

I will not comment on your coding. :unhappy:

Instead I will just show you mine. :winky:

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }

#box {
    width: 9.375em;
    height: 9.375em;
    border: 0.062em solid #f00;
    Margin: auto;
    background-color: #fff;
 }

#box div{
    width: 100%;
    height: 100%;
    border: 0.062em solid #000;
    box-sizing: border-box;
    border-radius: 50%;
    background-color: #fed;
    box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.3 );
 }
</style>

</head>
<body> 

 <div id="box">
  <div></div>
 </div>

</body>
</html>

coothead

3 Likes

And I added border spacing:

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }

#box {
    width: 150px;
    height: 150px;
    border: 1px solid #f00;
    Margin: auto;
    background-color: #fff;
    border-spacing: 5px;
    position: relative;
    display: table;
 }

#box div{
    width: 140px;
    height: 140px;
    border: 1px solid #000;
    box-sizing: border-box;
    border-radius: 50%;
    background-color: #fed;

 }
</style>

</head>
<body> 

 <div id="box">
  <div></div>
 </div>

</body>
</html>

<off topic>

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>circle within box</title>
    <style media="screen">
body {
    background-color:#f0f0f0;
    font:1em/150% verdana, arial, helvetica, sans-serif;
}
.box {
    display:table;
    border-spacing:1em;
    width:9.375em;
    height:9.375em;
    border:0.062em solid #f00;
    margin:auto;
    background-color:#fff;
}
.box::after {
    content:"";
    display:table-cell;
    border:0.062em solid #000;
    border-radius:50%;
    background-color:#fed;
    box-shadow:inset 0 0 1em rgba(0, 0, 0, 0.3);
}
    </style>
</head>
<body> 

<div class="box"></div>

</body>
</html>
1 Like

What’s the difference between using

#box div{

and

box::after { ?


And why is

.box::after {

more appropriate here?

If you look at the HTML, you will see that the ::after pseudo-element replaces the empty <div></div>.

I didn’t suggest that it was more appropriate. Just tossed it in as an <off topic> something to think about.

As you already know, pseudo-elements can’t be written as inline CSS. It’s just food for thought that you might use “someday” when you graduate to non-inlne CSS. :wink:

2 Likes

That would be appropriate anytime? :shifty:

3 Likes

Anytime after kindergarten.

How come this code doesn’t have, ::after { and should it have one?

<style>
.window {
  display: table;
  width: 150px;
  height: 150px;
  border-spacing: 25px; /* Remember border-spacing from the grid example? */
  background: #fff;
border:1px solid #f00;
}
.tcell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-family: "New Times Roman", serif;
  font-size: 1.125em; /* Use em or rem, NOT px */
  color: #00f;
  background-color: #fff;
  border-radius: 50%;
border:1px solid #000;
}
</style>

<div class="window">
  <p class="tcell">Example Text</p>
</div>

asasass,

The answer to your question is “probably not”. You would not be able to add text as shown in your example with a pseudo-element… You would need the <p> container. Think about it… where would you insert the paragraph? If the circle were simply decorative, then it could be built with a pseudo-element, but one should not add content with a pseudo-element.

The outer div is 148px x 148 wide yet you try to squeeze inside it an element that is 150px x 150px. How is that supposed to fit inside?

See coothead’s example where box-sizing has been added so that the borders are contained within the dimensions of the element.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.