Check out this jsfiddle that shows a vertical alignment of the progress bars. How can I modify it to align them horizontally and centered?
https://jsfiddle.net/bLe0jLar/
.wrapper {
width: 100px;
height: 100px;
}
.wrapper > #bar,
#bar2,
#bar3 {
position: relative;
}
.wrapper > #bar,
#bar2,
#bar3,
.wrapper img {
width: 100%;
height: 100%;
}
.wrapper img {
box-sizing: border-box;
padding: 4%;
border-radius: 50%;
}
.wrapper svg {
position: absolute;
top: 0;
left: 0;
}
Eliminate the width and height attributes from the img tag and utilize flex to achieve centering. Also, remove the height and width properties from the wrapper class for center alignment.
Make the following CSS updates:
.wrapper {
display:flex;
justify-content:center;
flex-flow:column;
align-items:center;
}
var circle = new ProgressBar.Circle('#bar', {
strokeWidth: 4,
color: '#000'
});
circle.animate(1);
var circle = new ProgressBar.Circle('#bar2', {
strokeWidth: 4,
color: '#000'
});
circle.animate(1);
var circle = new ProgressBar.Circle('#bar3', {
strokeWidth: 4,
color: '#000'
});
circle.animate(1);.wrapper {
display: flex;
justify-content: center;
flex-flow: column;
align-items: center;
}
.wrapper>#bar,
#bar2,
#bar3 {
position: relative;
}
.wrapper>#bar,
#bar2,
#bar3,
.wrapper img {
/* width: 100%;
height: 100%; */
}
.wrapper img {
box-sizing: border-box;
padding: 4%;
border-radius: 50%;
}
.wrapper svg {
position: absolute;
top: 0;
left: 0;
}<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js"></script>
<div class="wrapper">
<div id="bar"><img src="http://i.imgur.com/391FcV0.png" /></div>
<div id="bar2"><img src="http://i.imgur.com/NtqQEKF.png" /></div>
<div id="bar3"><img src="http://i.imgur.com/NGROIlB.png" /></div>
</div>Fiddle in action - View Fiddle
The progress bar is currently aligned vertically. How can I align them horizontally and in the center?
To achieve this, simply update your wrapper rule to:
.wrapper {
display: flex;
justify-content: center;
}
I recommend making some CSS changes (refer to notes). Additionally, there is no need to use the child selector > combined with an id selector #, like .wrapper > #bar, as there is only one element with that id
View updated fiddle with suggested changes
Stack snippet
var circle = new ProgressBar.Circle('#bar', {
strokeWidth: 4,
color: '#000'
});
circle.animate(1);
var circle = new ProgressBar.Circle('#bar2', {
strokeWidth: 4,
color: '#000'
});
circle.animate(1);
var circle = new ProgressBar.Circle('#bar3', {
strokeWidth: 4,
color: '#000'
});
circle.animate(1);.wrapper {
display: flex;
justify-content: center;
}
#bar, /* Changed ".wrapper > #bar" to "#bar" */
#bar2,
#bar3 {
position: relative;
margin: 0 5px; /* Added a gap between the circles */
}
.wrapper img {
box-sizing: border-box;
padding: 4%;
border-radius: 50%;
width: 100%; /* Added for scaling on smaller screens */
}
.wrapper svg {
position: absolute;
top: 0;
left: 0;
}<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js"></script>
<div class="wrapper">
<div id="bar"><img src="http://i.imgur.com/391FcV0.png" /></div>
<div id="bar2"><img src="http://i.imgur.com/NtqQEKF.png" /></div>
<div id="bar3"><img src="http://i.imgur.com/NGROIlB.png" /></div>
</div>To address your query, one effective solution could be to utilize inline blocks. This approach allows you to arrange blocks horizontally in a manner akin to inline elements by employing the text-align CSS property within a parent container.
var circle = new ProgressBar.Circle('#bar', {
strokeWidth: 4,
color: '#000'
});
circle.animate(1);
var circle = new ProgressBar.Circle('#bar2', {
strokeWidth: 4,
color: '#000'
});
circle.animate(1);
var circle = new ProgressBar.Circle('#bar3', {
strokeWidth: 4,
color: '#000'
});
circle.animate(1);.wrapper {
text-align:center;
}
.wrapper > div {
display: inline-block;
position: relative;
}
.wrapper img {
width: 100%;
height: 100%;
}
.wrapper img {
box-sizing: border-box;
padding: 4%;
border-radius: 50%;
}
.wrapper svg {
position: absolute;
top: 0;
left: 0;
}<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js"></script>
<div class="wrapper">
<div id="bar"><img src="http://i.imgur.com/391FcV0.png" /></div>
<div id="bar2"><img src="http://i.imgur.com/NtqQEKF.png" /></div>
<div id="bar3"><img src="http://i.imgur.com/NGROIlB.png" /></div>
</div>In order to achieve a specific task, I need to display 12 items in 4 columns with 4 items each. Initially, only the first four items are visible and the rest are hidden until the user clicks the "Show More" button. Upon clicking the button, the next row ...
As I develop my Next.js application, I've encountered an architectural challenge. I'm looking to switch between routes while maintaining the state of each page so that I can return without losing any data. While initialProps might work for simple ...
I am in the process of developing a JavaScript library that consists of a central core module and multiple optional submodules that enhance the functionalities of the core module. This library is specifically designed for the browser environment, utilizing ...
Having a problem with the gallery layout in Bootstrap. It looks great on desktop view, but on mobile, there's no space between images on the same row. On mobile, the images stack vertically without any spacing between them within a row. However, ther ...
I am new to using React and recently built a ToDo web app following a tutorial. Everything seemed fine during development, but when I tried to view the production version locally using serve -s build, two errors popped up that were not present before. reac ...
I have a task that involves extracting information from two JSON files. The goal is to log the names from one file and for each name, list the corresponding titles from the other file. The connection between the two files is made using an ID, although one ...
In my current project, the objective is to iterate through all images on a webpage and collect various details such as image name, original dimensions, actual size, ratio, display property, and FILESIZE. However, I have encountered a hurdle in my progress ...
Currently, my website utilizes Angular, NodeJs, and a SQL database. Most of the site's calls are made from the frontend to the backend and everything runs smoothly. However, I encountered an issue when running a stored procedure that had a longer proc ...
Here is a canvas I am working with: http://jsbin.com/soserubafe Here is the JavaScript code associated with it: var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var w = canvas.width; var h = canvas.height; var cw=canvas. ...
I have two projects, one created by following a tutorial series and the other created independently later on, aiming to replicate the first project. I have narrowed down my issue to a basic comparison of index.js in both projects. This code is an edited v ...
When attempting to retrieve specific data from my database using AJAX, I encountered an issue where the call was successful when made through Postman or directly in the browser, but failed when initiated from my client. It seemed to work intermittently, re ...
Is there a way to automatically change the background of a page when it loads, instead of requiring a button click? import img1 from '../images/img1.jpg'; import img2 from '../images/img2.jpg'; import img3 from '../images/img3.jpg& ...
I'm having trouble getting the buttons inside the menu bar to align properly. Does anyone have any suggestions on how to fix this? I'm not very experienced with coding, so any assistance would be greatly appreciated! .main-navigation { clear ...
Could someone please help with setting a condition in ng-repeat inside a custom directive call? <map-marker ng-repeat='obj in objects' title= 'obj.name' latitude= 'obj.last_point().latitude' longitude= ' ...
I have encountered a challenge with transforming an array. The original array looks like this: array = [ { "name": "name", "value": "Olá" }, { "name": "age" ...
Currently diving into the world of SAPUI5 and OData, I am in the process of creating a basic application that showcases employee data in a table. The objective is to add a new employee to the table whose information will be stored in the SAP backend. Whil ...
I'm trying to add a feature to my Carousel where the opacity changes between images. When clicking on the icons, the images should transition smoothly. I've been using React Transition Group, but for some reason, it's not working as expected ...
I am facing a challenge with handling a large JSON dataset (around 20k+ entries, totaling over 2mb) that I need to display on my web pages. Currently, I fetch this data using AJAX and parse it using JSON.parse in JavaScript, resulting in a complex multidi ...
I'm in the process of creating a simple Three JS application. As I familiarize myself with Three JS, I've been experimenting with different features. Currently, I am working on constructing a scene that includes a floor, an object, and a light so ...
Encountering an issue with hiding other div elements when one is visible. In the code snippet below, I aim to make Pacific Rim and World War Z disappear using z-index when Star Trek is visible. Here's my HTML code: <!doctype html> <html ...