Adjust the placement of a circular object containing text

After successfully creating a circular badge, I encountered an issue when trying to align it with the text. The circle starts at the same level as my content, but I aim to center it so that '100%' lines up perfectly with the preceding text: [FETCH NOM CERTIF]

https://i.sstatic.net/fIysy.png

If you take a look here, you'll see that I've defined the CSS for the badge:

.badge {
  height: 30px;
  width: 30px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 100%;
  background: #3dd16e;
  font-size: 10px;
}

.inline {
  display: inline;
}

And here is the HTML structure where the alignment needs adjustments:

<img class="icon" src="../../../media/img/skills.png">
<h4 class="headLines">Compétences :</h4><br>
<h6 class="paddtext inline">Certificat : [FETCH NOM CERTIF] <span class="badge">100%</span></h6><br>
<h6 class="paddtext inline">Certificat : [FETCH NOM CERTIF] <span class="badge">95%</span></h6><br>
<h6 class="paddtext inline">Certificat : [FETCH NOM CERTIF] <span class="badge">90%</span></h6><br>
<h6 class="paddtext inline">Certificat : [FETCH NOM CERTIF] <span class="badge">85%</span></h6><br>
htmlcss

Answer №1

In this scenario, I modified the centering strategy to use inline-flex instead of display: table-cell in order to maintain compliance while behaving like an inline element similar to span. Take a look at the updated code below. Cheers.

.badge {
  height: 30px;
  width: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  /* may require vendor prefixes */
  background: #3dd16e;
  font-size: 10px;
}

.inline {
  display: inline;
}
<img class="icon" src="../../../media/img/skills.png">
<h4 class="headLines">Compétences :</h4><br>
<h6 class="paddtext inline">Certificat : [FETCH NOM CERTIF] <span class="badge">100%</span></h6><br>
<h6 class="paddtext inline">Certificat : [FETCH NOM CERTIF] <span class="badge">95%</span></h6><br>
<h6 class="paddtext inline">Certificat : [FETCH NOM CERTIF] <span class="badge">90%</span></h6><br>
<h6 class="paddtext inline">Certificat : [FETCH NOM CERTIF] <span class="badge">85%</span></h6><br>

Answer №3

In case you're not a fan of how it appears with inline-flex (among other options), there's always the option to utilize transform along with translate and adjust the height according to your preference:

.badge {
  height: 30px;
  width: 30px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 100%; /* vendor-prefixes might be needed */
  background: #3dd16e;
  font-size: 10px;
  transform: translate(0,30%);

}

.inline{
  display: inline;
}
<img class="icon" src="../../../media/img/skills.png"><h4 class="headLines">
Skills :</h4><br>
<h6 class="paddtext inline">Certificate: [FETCH CERTIFICATE NAME] <span class="badge">100%</span></h6><br>
<h6 class="paddtext inline">Certificate: [FETCH CERTIFICATE NAME] <span class="badge">95%</span></h6><br>
<h6 class="paddtext inline">Certificate: [FETCH CERTIFICATE NAME] <span class="badge">90%</span></h6><br>
<h6 class="paddtext inline">Certificate: [FETCH CERTIFICATE NAME] <span class="badge">85%</span></h6><br>

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

I am having trouble toggling radio buttons in React

class VoiceSelector extends Component { constructor(props){ this.handleCheck = this.handleCheck.bind(this); } state={ voices : [ {"Voice":"Indian English Female Voice 1"}, {"Voice":&qu ...

javascripthtmlreactjs

Do we need to include href in the anchor tag?

Why am I unable to display the icon within the <anchor> element without using the href attribute? The icon only appears when I set the href attribute to "". Even if I manage to show the icon by adding href="", adjusting the size with width and height ...

javascriptjqueryhtmlcss

Ways to adjust width and height for mobile devices on a website with HTML and CSS

My resume is currently uploaded to a website and looks great on desktop. However, when viewed on mobile, the width shrinks and the height extends, causing text overflow and an overall terrible appearance. I'm looking for a solution that will display m ...

htmlcssmobile

The attempt to run 'observe' on 'IntersectionObserver' was unsuccessful: the first parameter is not of the correct type 'Element'

An error has suddenly cropped up in the code marked with stars. While it was running perfectly fine during the last project run, today it's showing an error message on the browser: "Failed to execute 'observe' on 'IntersectionObserver&a ...

javascripthtmljqueryreactjs

Chrome clipping positioned spans

Having trouble positioning a label above inline sections with spans in Chrome, as the labels are getting clipped oddly. Check out these screenshots: Firefox view: Chrome view: In the Chrome screenshot, you can see that the labels are being cut off based ...

htmlcssgoogle-chromewebkit

What could be causing the unresponsive hamburger button on my navbar?

As a beginner in HTML and Flask, I am attempting to create a navbar. However, I am encountering an issue with the hamburger button not functioning properly. When I resize the window smaller, the hamburger button appears but does not show the items like "Lo ...

htmlcssflask

What could be causing the variation in thickness between these 1px divs?

Why do the divider lines in this section of my website appear to be different sizes even though they have the same pixel height? Take a look at the code snippet below for reference. Are there any alternative methods for creating visually appealing section ...

htmlcssline

Methods to validate CSS attributes specified within a class using React testing library

I am struggling to validate the CSS properties defined within a class in CSS using the React Testing Library. Unfortunately, I am facing challenges in doing so. Here are the simplified code snippets: import React from "react"; import { render, ...

cssreactjstypescripttestingreact-testing-library

Stylish dropdown menu design inspired by W3CSS website

I recently implemented a CSS dropdown menu example that I found on a website, but it's not working with my code. I double-checked for typos but couldn't find any. Even when I tried to directly copy the code and replace the content with my own, i ...

htmlcssdropdown

"Enhance your website navigation with the Bootstrap BS3 navbar clc Dropdown-Submenu feature

Utilizing Bootstrap BS3 for the construction of my Django website. I created a dropdown-submenu that is operational on http://www.bootply.com/nZaxpxfiXz# https://i.sstatic.net/85uTq.png However, when implementing the same in my project, I encountered: h ...

jquerycssdjangotwitter-bootstrapdrop-down-menu

Ensure the first column is fixed and all other columns have the same height

I have encountered an issue where the first column of my table has varying heights compared to the other columns, resulting in inconsistent row heights. Below is the code I am using: <div class="outer"> <div class="inner"> <table> ...

htmlcss

Difficulty encountered when positioning a container using BootStrap 4

As a newcomer to the world of web development, I encountered an issue while trying to align a container on my webpage. Despite my efforts to center the container using (line 30), the page seems to update but there is no visible change. Can anyone help me ...

javascripthtmlcssbootstrap-4visual-web-developer

Positioning Tumblr blockquotes beneath each other, rather than within

Just diving into the world of HTML/CSS and I've been working hard on creating my own Tumblr theme (almost finished!). One issue I'm having is styling the replies, which are in blockquote form. I want them to display one after another in a line li ...

htmlcsstumblr

Bootstrap navbar does not collapse when clicking and is experiencing a responsiveness problem

Struggling to hide the navbar on my responsive site. Button click doesn't always close the navbar as intended. If anyone can assist, I'm working on an Angular 9 project. Demo : index.html : <!doctype html> <html lang="en"> <he ...

htmlangularbootstrap-4responsive-designnavbar

Identify and highlight all elements sharing a common class using JavaScript

Is there a way to select (highlight) all of the text content within a specific class? I attempted the following: range = document.createRange() for (var i = selectionItems.length - 1; i >= 0; i--) { range.selectNode(selectionItems[i]) } window.getSe ...

javascripthtml

Positioning an image/carousel at the bottom of multiple without the need for alignment

I'm in the process of creating a single-page website with sections stacked on top of each other, including a section where divs are stacked both next to and on top of each other. Within this section, there is a container div that holds 5 divs named bo ...

htmlcssbootstrap-5

Automatic responsive navigation bar in mobile view

As a novice in web programming, I'm facing an issue where the navigation bar shifts to the bottom when the mobile screen size changes. Many solutions online use the hamburger style, which I find less appealing. Here is how the mobile view looks befor ...

csslaravel-8bootstrap-5

The heights of columns in CSS column-count vary

I've been experimenting with creating a masonry grid of images using column-count to achieve a similar layout to this example. Despite following the CSS and HTML structure outlined in the link, I've encountered an issue where the columns don&apo ...

csscss-multicolumn-layoutcolumn-count

Center an image vertically within its container

Here is an example of some HTML/CSS code: .section { width: 100%; height: 200px; overflow: hidden; } .section img { max-width: 100%; height: auto; } <div class="section"> <img src="http://www.example.com/image.jpeg" alt="image" /> ...

htmlcss

Introducing Row Offset Enhancement

I am working on a code to create a custom "table" because I require some more intricate features that a regular table cannot provide. <div class="container"> <cfloop index="x" from="1" to="5"> ...

htmlcssbootstrap-4coldfusionbootstrap-5