Circular containers with text and subtitles arranged in a vertical alignment

I am struggling to find a solution for what seems like a simple task. I want to create 5 circular divs, each containing a letter grade with the subject title below it. Here is what I have tried so far:

HTML:

<div class="subject">A</div>
<div class="subject">B</div>
<div class="subject">C</div>
<div class="subject">D</div>
<div class="subject">E</div>

CSS:

.subject {
    display: inline-block;
    background-color: gray;
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    font-family: Arial;
    border-radius: 100%;
    color: white;
    font-size: 100px;
}

Unfortunately, I am having trouble centering the circles horizontally using:

margin: 0 auto;

or

margin-left: auto;
margin-right: auto;

Any tips or suggestions would be greatly appreciated. Thank you!

htmlcssweb

Answer №1

Enclose the div elements in a container and apply text-align: center to it.

To add a subtitle, utilize the pseudo element :after. See example below:

.container {
  text-align: center;
}
.subject {
  border-radius: 100%;
  display: inline-block;
  background-color: gray;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  font-family: Arial;
  border-radius: 100%;
  color: white;
  font-size: 100px;
  position: relative;
}
.subject:after {
  display: inline-block;
  position: absolute;
  font-size: 16px;
  content: attr(data-sub);
  left: 50%;
  transform: translateX(-50%);
  top: 30%;
}
<div class="container">
  <div class="subject" data-sub="Maths">A</div>
  <div class="subject" data-sub="French">B</div>
  <div class="subject" data-sub="Biology">C</div>
  <div class="subject" data-sub="German">D</div>
  <div class="subject" data-sub="Chemistry">E</div>
</div>

Answer №2

To achieve this, I created an additional div and applied the text-align:center property. Now, the group of circles is centered horizontally.

.subject {
    display: inline-block;
    background-color: gray;
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    font-family: Arial;
    border-radius: 100%;
    color: white;
    font-size: 100px;}

.circle{
  text-align:center;
}
<div class="circle">
<div class="subject">A</div>
<div class="subject">B</div>
<div class="subject">C</div>
<div class="subject">D</div>
<div class="subject">E</div></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

Utilizing CSS3 to apply a customized background color to every set of three table rows

Is it possible to achieve what I want using CSS3 without Javascript? I've experimented with nth-child and nth-of-type, but couldn't get it to work. I have three table rows that I want to give a background color to, but the table rows beneath them ...

htmlcsshtml-table

Tips for customizing the default styles of PrimeNG's <p-accordion> tag

Hello, I have encountered an issue with my html code snippet. I am attempting to create a tab with a label-header named "Users", but the accordion tag consistently displays it as underlined. <div class="ui-g"> <p-accordion id="tabsHeader"> ...

htmlangularprimeng

Please enter a number using the "+" sign and a decimal point

In my input field, I have specified: <input type="number" step="0.01"> I expect all of these input values to produce the following outputs: 2.00 => 2.00 2,00 => 2.00 +2,00 => 2.00 However, when entering the value "+2.00", it fail ...

javascripthtml

Ways to tally HTML elements using VBA

Currently, I am delving into the world of creating a web scraping tool using VBA to extract event details and store them in an Excel sheet. Within this endeavor, I am faced with deciphering HTML code snippets that resemble the following: <div class="a ...

htmlexcelvbaweb-scraping

When a dialog box is displayed, a scrollbar will automatically appear

I've encountered a strange issue while working with Angular dialogs: A vertical scrollbar unexpectedly appears, even though I've set the dialog to have a fixed width. component.ts const dialog = this.dialog.open(DialogComponent, { width: ...

htmlcssangular

What is the best way to design a page with a fixed dimension element and a flexible liquid element?

Is there a way to achieve the layout described below without relying on tables? Left element (100px) | Right element (occupies remaining space, even with no content) Thank you! Edit: Here's the link to the code: http://pastebin.com/vU33jNxD ...

csslayout

How come the background image gets replaced by an extensive amount of text?

When using a text-field with a background-image style, the following CSS is applied: .leftPaneContent INPUT { background-color: #FFFFFF; background-image: url("../images/icon-search-large.png"); background-position: 4px 3px; background-rep ...

cssinternet-explorerbackground-image

Why isn't the max width applying to an input element wrapped within a Div?

Hey there! I recently created a Search Bar and wrapped it inside a div with a max-width of 500px, but for some reason, the max-width is not working as expected. I searched on Stack Overflow and came across a helpful link on Why would max-width not work on ...

javascripthtmlcss

Different options for determining network connectivity on a website

Seeking Network and Location Information on ASP.Net Core MVC Web Application After some investigation, I came across the Navigator API online. For acquiring location data, it functions flawlessly. navigator.geolocation.getCurrentPosition(function (posi ...

javascriptasp.net-mvchtmlasp.net-core-2.0

Footer div is being covered by the page

I am currently working on a website built with "WordPress", and I have implemented a mobile footer plugin that is designed to only appear on mobile devices. However, I am encountering an issue where the page content overlaps the footer on phones. I attemp ...

javascriptjqueryhtmlcsswordpress

Create a sleek Bootstrap 4 webpage featuring a fixed footer and navigation bar. However, the challenge lies in ensuring that the content fills the

Currently, I am in the process of creating a template page that includes a navbar and a footer with the intention of adding additional columns within the main div (container-fluid) at a later stage. However, I have encountered two issues that I cannot seem ...

cssbootstrap-4

Styling targeted div class elements with specific input elements

I have a group of input text elements on my webpage. I am looking to style the div element with the "forms_in_ap" class that contains the #email, #reEmail, #nogInFirstName, and #nogInAccNumber elements specifically for Safari browsers on MAC and IOS device ...

htmlcss

When you hover, there is no writing cursor in sight

I'm looking for a way to display a label on an input field and have a writing cursor show up when hovering over the label. I am not interested in using a placeholder label. Do you have any simple solutions for this? See the code snippet below: JSFiddl ...

htmlcss

Initiating the accordion feature requires two clicks and triggers an rotation of the icon

I managed to integrate some code I discovered for a FAQ accordion on my website. I am struggling with getting the title to expand with just 1 click instead of 2. Additionally, I would like the icon to rotate when expanding/collapsing, not just on hover. Be ...

javascripthtmlcssaccordionrotatetransform

Issue with website header disappearing

I'm currently struggling with an issue - I can't seem to pinpoint the problem. The header of a website template is functioning perfectly in 1280*800 resolution, but it's breaking on larger monitors (1900*1440). The header consists of three d ...

htmlcssheader

``The issue concerning the preloading layer on the website``

My experience with the website www.wirecreation.net is sometimes marred by an issue during the initial load. It seems that there is a margin of a few pixels on the gray div containing the logo and progress bar at times, but other times it appears with zero ...

javascripthtmlcsspreload

Steps for making a yii2 inline checkbox listWould you like to learn

I posted my issue on the yii2 forum, but unfortunately, I did not receive any help. It seems like no one knows the answer to my problem. Here is a brief overview: I want to achieve the following: <label class="checkbox-inline"><input type="chec ...

phphtmlcheckboxtwitter-bootstrap-3yii2

What's causing this bootstrap button to act up?

https://i.sstatic.net/9ZAz9.png It was expected that the button would appear on the right side while the navigation titles would be displayed on the left. <nav id="mainNavbar" class="navbar navbar-dark bg-dark navbar-expand-md"> ...

cssbootstrap-4flexbox

What is the best way to display a Bootstrap toggle?

I am facing an issue with a Bootstrap toggle in a Handlebars template. When the page initially loads, the toggle is visible, however, after re-templating the Handlebars template that contains the toggle, it disappears. Before Re-Template: Initial code : ...

javascriptjquerycsstemplatestwitter-bootstrap

Stacking of div elements is not possible when they have a position relative

To summarize, I created a container div (parent) with a relative position and then added 3 children divs with absolute positions. Now, I am attempting to add another div that should appear below all of this content, essentially representing the next sectio ...

htmlcss