Center text inside a circle using CSS styling

Having trouble centering text inside a circular element with the code provided below. I've tried various methods but can't seem to get it aligned both vertically and horizontally.

.circle {
  background: rgba(72, 156, 234, 1);
  background: -moz-linear-gradient(left, rgba(72, 156, 234, 1) 0%, rgba(31, 123, 229, 1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(72, 156, 234, 1)), color-stop(100%, rgba(31, 123, 229, 1)));
  background: -webkit-linear-gradient(left, rgba(72, 156, 234, 1) 0%, rgba(31, 123, 229, 1) 100%);
  background: -o-linear-gradient(left, rgba(72, 156, 234, 1) 0%, rgba(31, 123, 229, 1) 100%);
  background: -ms-linear-gradient(left, rgba(72, 156, 234, 1) 0%, rgba(31, 123, 229, 1) 100%);
  background: linear-gradient(to right, rgba(72, 156, 234, 1) 0%, rgba(31, 123, 229, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#489cea', endColorstr='#1f7be5', GradientType=1);
  border-radius: 50%;
  height: 80px;
  width: 80px;
  position: relative;
  box-shadow: 0 0 0 5px #F1F1F1;
  margin: 10px;
  color: #6F0;
  vertical-align: middle;
}

.text_circle {
  font-size: 36px;
  margin-bottom: 50px;
  vertical-align: middle;
}
<div align="center" class="circle">
  <span class="text_circle">5</span>
</div>

htmlcss

Answer №1

If you only have a single line of text to display, a neat trick is to adjust the line-height property to match the height of the circle:

.circle {
  background: rgba(72, 156, 234, 1);
  border-radius: 50%;
  height: 80px;
  width: 80px;
  position: relative;
  box-shadow: 0 0 0 5px #F1F1F1;
  margin: 10px;
  color: #6F0;
  vertical-align: middle;
}

.text_circle {
  font-size: 36px;
  margin-bottom: 50px;
  line-height: 80px;
}
<div align="center" class="circle"><span class="text_circle">5</span></div>

Answer №2

There are a couple of solutions to address your inquiry.

Solution One

You can set the position:relative property for the .circle element:

.circle {
   position:relative;
}

Next, apply the following properties to the text_circle class:

.text_circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

Solution Two

Add the line-height property to the circle element with the same height value:

.circle {
  line-height: 80px;
}

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 Unicode characters within the content of a pseudo element in data-content

Is there a way to include unicode in the data-content attribute using JQuery for pseudo element content? I'm having trouble with the correct formatting. How can I properly display unicode characters? Currently, all I see is &#x25BC;. a::after { ...

jquerycssunicodepseudo-element

Striving to convert Celsius to Fahrenheit using ReactJS

I am currently attempting to convert Celsius into Fahrenheit within this specific div. Despite being fairly new to React, I’m finding it challenging to determine where exactly to place the conversion calculation. return ( <div className="app& ...

cssreactjs

Instructions on how to load an HTTP file inside a Bootstrap modal

Is it possible to load a file located at an http:// address into a modal window? Something like this: <a class="btn btn-info btn-large" data-toggle="modal" href="#http://localhost/login.html"> <i class="icon-user icon-white"></i> Login ...

csstwitter-bootstrap

Ensure that the div is styled with a white background and positioned next to another div with a right margin

I have a white-colored div that needs to be positioned next to another element on a webpage. Additionally, I need a paragraph placed on top of this div for information purposes. Please refer to the following link to see what I am trying to achieve: https:/ ...

htmlcss

Unable to create follow/unfollow feature with jquery ajax

Issue: While the database part for following and unfollowing actions is functioning correctly, there seems to be a problem with the jQuery and Ajax section. The follow button changes to unfollow (with some CSS styling) only after refreshing the page, rathe ...

javascriptphpjqueryhtmlajax

The lack of vertical alignment in the table

Trying to do something really simple here and I'm a bit stuck. Currently working on a forum project, and surprisingly the backend is error-free (thanks to some questionable magic tricks), However, my current task is to display all subcategories using ...

phphtmlcss

- The click function is failing to work after an ajax call [Potential event delegation problem]

I have a webpage where I update the contents of an unordered list using $.get() every 5 seconds. The issue I am facing is that the click function for the list items is not working properly. Even though the list items are being updated correctly, there se ...

javascriptjqueryhtml

Using JavaScript to dynamically load Cascading Style Sheets based on the current

I am trying to dynamically load different CSS files based on the current date (season). I attempted to tweak an image script that I found on Stack Overflow, but it didn't yield the desired result. Could someone please guide me on where I might be ma ...

javascriptcssdate

The implementation of pre-wrap styling resulted in a significant increase in the indentation of the initial

I am currently developing a book blogging platform that allows users to submit book reviews through a form with a textarea field. To ensure that the user-entered paragraph breaks are displayed properly on the post's show page, I included a pre-wrap c ...

htmlcssbootstrap-4text-formatting

Is there a way to connect a function to a div using anchor tags that mimic a dropdown menu?

Here is the HTML code for a navigation bar that I have created <div class="navbar"> <a href="#home">Home</a> <div class="dropdown"> <button class="dropbtn">Categories ...

javascripthtml

The arrangement of divs in a modern metropolitan aesthetic

I'm facing an issue with the positioning of the tiles div in metro u. This is specifically for SharePoint, so I can only work with CSS/HTML and not JavaScript. The problem seems to be a missing div on the left side. Any assistance would be greatly app ...

htmlcss

Can we use CSS to animate the enlargement of an element without moving it?

Take a look at this jsFiddle. With CSS animations gaining popularity, I am interested in creating an effect where an element (.box) expands with an animation when the mouse hovers over it. The challenge is to keep the center of the element fixed while enla ...

animationcss

How can I apply bold styling to my interpolation binding in Angular while working on my HTML code?

Below is the code snippet where I am attempting to highlight profile.userId: <p class="profile__last-login" *ngIf="profile.lastLoggedIn"> {{'intranet.profile.dashboard.lastLoggedIn' | messageBundle: profile.userId + ',' + (pr ...

htmlcssangular

I have developed a custom jQuery carousel that includes functionality to start and stop the carousel based on specific conditions

I have set up a jQuery carousel that moves to the left when a checkbox is checked, but I need it to stop moving when the checkbox is unchecked. Can someone help me achieve this? $("#checkBox").click(function(){ if($(this).prop("checked") == true){ ...

javascriptjqueryhtmlcss

Implementing a PHP function to retrieve rating values when clicking on star icons

I am looking to implement a star rating system for users and update the database values accordingly after each rating. Below is my PHP code snippet: <?php foreach($genres as $genre){ $jsqla = mysql_query("select id,name,rate_score,rate_number,vide ...

phphtmlajax

Aligning float:left divs vertically

I have multiple divs with equal widths but varying heights that I need to fit together tightly. When I set them to float left, they don't align vertically but instead line up at the bottom of the row above. Even with the example below, I want to eli ...

csshtmlcss-floatvertical-alignment

Set the cursor in the textbox automatically when the page first loads

Is there a way to set focus on a text box when a page loads? I've attempted using the autofocus attribute but it hasn't worked for me. You can view my form here: http://pastebin.com/xMJfQkcs ...

javascripthtml

What is the best way to format a `<ul>` element that does not contain any `<li>` elements?

A new feature on my website allows users to dynamically add list items (<li>) to a list container (<ul>). I want the list container style to change when there are no list items present. <ul class="con"> </ul> ul.con:not(: ...

csscss-selectors

Turn off Chrome Autofill feature when placeholders are being used in forms

I am encountering difficulties with Google autofill for fields that have placeholders. Despite attempting various solutions provided at: Disabling Chrome Autofill, none of them seem to work as needed. The challenge is to create a form with different field ...

javascripthtmlcssgoogle-chromeautofill

JavaScript call to enlarge text upon click

I'm struggling to figure out why my font enlargement function isn't working as expected. Below is the code for my font enlargement function: <script type="text/javascript> function growText() { var text = document.getElementBy ...

javascripthtmlonclick