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>
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.
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.
Instead I will just show you mine.
<!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
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>
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.
That would be appropriate anytime?
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.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.