Ways to align an inner circle in the middle using CSS

div.container{
  border:2px dashed blue;
  position:relative;
}
span.parent{
  display:inline-block;
  width:40px;
  height:40px;
  border:2px solid black;
  border-radius:50%;
  text-align: center;
  position:absolute;
  right:20px;
  top:10px;
}

span.child{
  background:yellow;
  width:90%;
  height:90%;
  display:inline-block;
  border-radius:50%;
  left:5%;
  top:5%;
  position:relative;
}
<div class="container">
  <p>some content here</p>
  <span class="parent"><span class="child"></span></span>
</div>

I want to make a circle with a border, but the filling is not centered correctly. How can I adjust this?

htmlcss

Answer №1

One alternative approach is utilizing Flexbox.

To center the child element inside the parent, you can add the following styles to your parent container:

display: flex;
align-items: center;
justify-content: center;

Make sure to remove relative positioning from the child element for proper centering.

div.container{
  border:1px solid red;
  position:relative;
}
span.parent{
  display: flex;
  align-items: center;
  justify-content: center;
  width:30px;
  height:30px;
  border:1px solid gray;
  border-radius:50%;
  text-align: center;
  position:absolute;
  right:20px;
  top:10px;
}

span.child{
  background:green;
  width:80%;
  height:80%;
  display:inline-block;
  border-radius:50%;
}
<div class="container">
  <p>some info goes here</p>
  <span class="parent"><span class="child"></span></span>
</div>

Edit: If you encounter issues with squashed circles on smaller screens, consider using min-height and min-width, as well as margin: auto for centering instead of relying solely on display: flex.

Answer №2

Apply left:0; to the span.child class.

div.container{
  border:1px solid red;
  position:relative;
}
span.parent{
  display:inline-block;
  width:30px;
  height:30px;
  border:1px solid gray;
  border-radius:50%;
  text-align: center;
  position:absolute;
  right:20px;
  top:10px;
}

span.child{
  background:green;
  width:80%;
  height:80%;
  display:inline-block;
  border-radius:50%;
  left:0;
  top:10%;
  position:relative;
}
<div class="container">
  <p>some info goes here</p>
  <span class="parent"><span class="child"></span></span>
</div>

Answer №3

Simply switch the position:relative to position:absolute for the child span with the class name span.child.

div.container{
  border:1px solid red;
  position:relative;
}
span.parent{
  display:inline-block;
  width:30px;
  height:30px;
  border:1px solid gray;
  border-radius:50%;
  text-align: center;
  position:absolute; /* Change this from relative */
  right:20px;
  top:10px;
}

span.child{
  background:green;
  width:80%;
  height:80%;
  display:inline-block;
  border-radius:50%;
  left:10%;
  top:10%;
  align:center;
  position:absolute; /* Change this from relative */
}
<div class="container">
  <p>some info goes here</p>
  <span class="parent"><span class="child"></span></span>
</div>

Answer №4

To center the child, you can utilize position: absolute

span.child{
  background:green;
  width:80%;
  height:80%;
  display:inline-block;
  border-radius:50%;
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
}

The values of left and top have been adjusted, and transform:translate() has been added to ensure centered alignment regardless of browser size

div.container {
  border: 1px solid red;
  position: relative;
}

span.parent {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 1px solid gray;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  right: 20px;
  top: 10px;
}

span.child {
  background: green;
  width: 80%;
  height: 80%;
  display: inline-block;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
<div class="container">
  <p>some info goes here</p>
  <span class="parent"><span class="child"></span></span>
</div>

Answer №5

Just made a simple tweak by changing the CSS property from position:relative to position:absolute for the span.child element

div.container{
  border:1px solid red;
  position:relative;
}
span.parent{
  display:inline-block;
  width:30px;
  height:30px;
  border:1px solid gray;
  border-radius:50%;
  text-align: center;
  position:absolute; /* changed */
  right:20px;
  top:10px;
}

span.child{
  background:green;
  width:80%;
  height:80%;
  display:inline-block;
  border-radius:50%;
  left:10%;
  top:10%;
  position:absolute; /* changed */
}
<div class="container">
  <p>some info goes here</p>
  <span class="parent"><span class="child"></span></span>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

All browsers experiencing issues with autoplay audio function

While creating an HTML page, I decided to include an audio element in the header using the code below: <audio id="audio_play"> <source src="voice/Story 2_A.m4a" type="audio/ogg" /> </audio> <img class= ...

javascripthtmljquery

What is the reason for the absence of absolutely positioned elements in the render tree?

Recently, I came across some information about the render tree: As the DOM tree is being created, the browser simultaneously generates a separate tree known as the render tree. This tree consists of visual elements arranged in the order they will ap ...

javascripthtmlcssgoogle-chromebrowser

How can I prevent media controls from appearing in fullscreen mode on Microsoft Edge using CSS?

My video code allows for switching the video into fullscreen mode using custom controls. Here's how it looks: fullScreenButton.addEventListener("click", function() { if (video.requestFullscreen) { video.videoContainer.r ...

javascriptcss

How to enable checkbox return in PHP arrays

I recently created a form on a website where users can input their name and provide links to their favorite websites. I wanted the form to submit without reloading the page, and also required users to accept the terms and conditions before submitting. Afte ...

phphtmlajax

What is preventing me from modifying the input file name in PHP?

After executing the code below, an error message pops up: "Notice: Undefined index: uploadFile in C:\xampp\htdocs\ImageTest\processImage.php on line 17" However, when I switch every occurrence of 'uploadFile' with 'fi ...

phphtmlglobal-variables

JavaScript plugin designed for effortless conversion of JSON data to structured HTML code

I want to add this JSON data to an HTML element. [ { "website":"google", "link":"http://google.com" }, { "website":"facebook", "link":"http://fb.com" } ] Is there an easy way to convert this using a plugin ...

javascriptphpjqueryhtmljson

Encountering difficulty when trying to parse an HTML file as JSON using AJAX, resulting in an 'unexpected token' error

I have a Siemens s7 1200 PLC with a webpage on it that is structured like a json file (even though it is in html format to allow the PLC to modify variables). I am attempting to retrieve this data from an external web server using an ajax request. The only ...

javascripthtmljsonajax

PHP is failing to redirect the user to the correct index.php file

I encountered an issue in Jquery Mobile that has left me puzzled. Upon entering the site, users are prompted to either register or login. When selecting register, they are redirected to a page where they input their information. Once completed, the data is ...

phphtmlajaxjquery-mobile

Spinning the Dial using CSS

I have this SVG image (displayed below) and I am looking to create a continuous animation on the meter dashboard hand. The animation I want involves it (the meter hand) rotating 90 degrees to the left and then 90 degrees to the right. Usually, the CSS prop ...

htmlcssanimationsvg

Arrange elements in a vertical flow based on the height of the container

I am attempting to alter the direction of Elements to be vertical. Here is an example: By default, HTML elements are displayed horizontally like this:- #container { position: absolute; width: 400px; height: 200px; border: 1px solid gree ...

javascriptjqueryhtmlcss

Having trouble correctly parsing XML data using JavaScript

My input field contains the following XML code: <?xml version="1.0" encoding="utf-8"?> <players timestamp="1536505850"> <player id="0518" name="Eagles, Philadelphia" position="Def" team="PHI" /> <player id="10271" name="Jones, Jul ...

javascripthtmlxml

Using JavaScript, create a set of buttons within a div element and implement

$(document).ready(function() { $('#b1').click(function() { $('#uch').toggle("slow"); }); $('#b2').click(function() { $('#uch2').toggle("slow"); }) }) Although I'm not a program ...

javascriptjqueryhtmlcssfunction

Guide to implementing proportional height for an element using JQuery 3.3.1

I am currently working on dynamically setting the heights of elements with a specific class using JQuery in order to achieve a 16:10 ratio based on their width. However, I'm encountering an issue where the height doesn't seem to be applied and re ...

jquerycss

Combining Angular and Bootstrap: how to create two overlapping divs

Looking to enhance a project in Angular 15 + bootstrap 5 by creating two draggable divs where the lower one can be vertically resized to overlap the upper one? I've managed to set up most of it, but when dragging the lower div, its transparency makes ...

htmlcssangularbootstrap-5

Ensuring that the empty bubble remains undisturbed, here's a guide on effectively implementing the if

I need assistance with adding an "if condition" to my text field. The condition should prevent the empty bubble from appearing when the send button is clicked. function verifyInput(){ var currentText = document.getElementById("demo").innerHTML; var x ...

javascripthtmlcss

What steps can I take to avoid random divs from overlapping on smaller screens when dealing with elements created in the created() hook?

I encountered an issue with the code I'm working on (the circles overlap in the fiddle provided, but display correctly on my PC - possibly due to pixel discrepancies in the fiddle). You can find the code here. TestCircle.vue: <template> <d ...

javascripthtmlcssvue.jsvuejs3

Tips on resizing images in card groups with bootstrap 4?

Hey there! I've come across an issue with my code that was initially working perfectly. The images I'm using have different resolutions, causing the card images to display in various sizes. Is there a way to implement image scaling to ensure all ...

htmlcssbootstrap-4

Crafting a Cubic Masterpiece with Pure CSS Gradient Magic

Experimenting with various techniques involving linear gradients, I have achieved layers of multiple stripes but have encountered a block when it comes to the top face. My goal is to use gradients, whether linear or radial, to create a series of repeatin ...

htmlcssgraphics3d

Designing an opening interface for an HTML5 Canvas gaming experience?

It's common knowledge that the HTML5 Canvas element interfaces seamlessly with the incredibly efficient Javascript Engines found in Firefox, Safari and Chrome. Lately, I've been delving into game development using Javascript and the Canvas, and ...

javascriptjqueryhtmlcanvas

Is there a way to horizontally align my navigation bar links with CSS while maintaining grey borders on the sides?

What is the best way to center my navigation bar links using CSS without losing the grey sides? Both Blogs and History have dropdown menus. Check out this screenshot: https://i.sstatic.net/2kvTm.png (source: gyazo.com) CSS: .navbar ul { list-styl ...

htmlcsscenter