What is the best way to center text vertically in a circular div?

Struggling to achieve a circle-shaped div with centered text? While it's easy to horizontally align text in the middle, achieving vertical centering can be a challenge. Various methods such as vertical-align, padding, and display have been attempted, but the text still stubbornly remains at the top.

Take a look at the HTML causing the issue:

<div class="widget">
    <p id='case'>{27 cases}</p>
</div>

Check out the CSS for the problematic div:

.widget {
    background-color: #ff1122;
    color: yellow;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    text-align: center;
    font-size: 24px;
    vertical-align: middle;
}

Striving to place the text precisely in the vertical middle of the circular div? Looking for a solution to this challenge. Can you help?

htmlcss

Answer №1

Check out this amazing CSS snippet:

.widget {
    background-color: #f12;
    color: yellow;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    text-align: center;
    font-size: 24px;
}

.widget * {
  display:inline-block;
  vertical-align: middle;
}

.widget::before {
  content: "";
  display:inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}
<div class="widget">
    <p id='case'>{27 cases}</p>
</div>

Answer №2

Set the circle to have a display: table; property and the inner p element to have display: table-cell; and vertical-align: middle;.

.circle {
    background-color: #ff1122;
    color: yellow;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    text-align: center;
    font-size: 24px;
    display: table;
}

.circle p {
    display: table-cell;
    vertical-align: middle;
}
<div class="circle">
    <p id='content'>{27 items}</p>
</div>

Answer №3

To achieve the desired result, it is recommended to incorporate the line-height property. Ensure that the line-height matches the height of the circle, which in this scenario is set to 150px.

line-height:150px;


.widget {
    background-color: #ff1122;
    color: yellow;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    text-align: center;
    font-size: 24px;
    vertical-align: middle;
    line-height:150px;
}
<div class="widget">
    <p id='case'>{27 cases}</p>
</div>

If you are open to utilizing flex-box, it is also possible to achieve the desired outcome in a different manner that supports multiple lines of text.

.widget {
    background-color: #ff1122;
    color: yellow;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    text-align: center;
    font-size: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
<div class="widget">
  <p id='case'>This is multiple line text.</p>
</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

Specifying Size of Icons in HTML and CSS

Displayed in the image below are 3 icons - 2 of them are the same size, while one (on the left) appears larger and uneven compared to the other two. https://i.sstatic.net/JtIov.png This snippet demonstrates the HTML code related to this section: < ...

htmlcss

"Modify the CSS color of h1 based on the presence of a specific class containing spaces in a div

I am currently attempting to modify the color of a heading by referencing a specific div's class. My attempts so far include: .pagetitle-title.heading { color: purple; } <div class="container"> <h1 class="pagetitle-title heading">I ...

htmlcsswordpress

Angular 2 component hierarchy with parent and child components

Currently, I am in the process of learning typescript and angular2. My attempt to incorporate parent and child components into my fiddle has not been successful. Despite conducting some research, I have encountered an error that states: Uncaught ReferenceE ...

htmlangulartypescript

Arranging HTML components in Vue.js using v-for loop

Recently, I started using vue.js and I have a requirement where I need to display an HTML structure based on API data. The structure should look like this: <div class="row"> <div><p>text1</p><img src="{{imgurl1}}" /></di ...

javascripthtmlvue.js

Checkbox enabled Bootstrap image

I am encountering a minor issue where I am attempting to incorporate a simple image that can be toggled on and off by clicking on it. After coming across some bootstrap code online, I decided to test it in my project. Unfortunately, the code does not seem ...

javascripthtmlcss

"Position centrally on the inside, using flexbox to fill the entire

Seeking assistance with aligning the text in the center of the flexboxes so that the h4 and p elements in the large box are centered within their respective boxes, as well as ensuring the text in the two smaller boxes is also centered. Any help would be gr ...

htmlcssflexboxfullscreencenter

Dropdown menu is not positioning correctly over other elements on the webpage

After researching multiple stack overflow questions and attempting various solutions, I still haven't been able to resolve my issue. Please refrain from marking this question as a duplicate. The problem I am facing is that my dropdown menu is not ap ...

htmlcsssass

I am facing constant connection resets while attempting to upload a file to the Tomcat server

Exploring the creation of a website where users can freely post content has been an interesting journey. One challenge I'm currently facing is enabling users to upload files sequentially and send them as a multi-part request in ajax. Unfortunately, I ...

javascripthtmlajaxtomcat

Two resizable divs positioned next to each other - first div adapts to the size of the second div

I have a unique challenge with two divs positioned side by side. The first div contains random text of varying lengths, while the second div holds a random number of inner divs. My goal is to have these two divs completely fill the space within their wrap ...

jqueryhtmlcss

Immediate self-invocation occurs within a JavaScript function

My goal is to dynamically create a DOM button object with JavaScript, and it seems to be happening perfectly fine. However, I'm facing an issue where if I try to assign another JavaScript function to one of the buttons, the other script triggers itsel ...

javascripthtmljspdom

Using `display:table-cell` does not function correctly when set to a 100% width

I'm having an issue with aligning text vertically inside a div: display:table-cell; vertical-align: middle; While the text aligns properly, the div (which has a width of 100%) is shrinking in width. What could be causing this problem and is there a ...

html

What steps should I take to fix the "loading page" issue in VS2010?

Upon attempting to debug (F5) my website, I encountered the following error message: "Firefox cannot locate the server at www.localhost.com." Switching to IE did not resolve this issue either. Any suggestions on how to fix this problem would be greatly ...

asp.netvisual-studio-2010html

Why is the toggle list not functioning properly following the JSON data load?

I attempted to create a color system management, but as a beginner, I find it quite challenging! My issue is: When I load my HTML page, everything works fine. However, when I click on the "li" element to load JSON, all my toggle elements stop working!!! ...

javascriptjqueryhtmlcssjson

What is preventing relative paths from functioning with xsl:include?

I am working with an XSL file that converts to PDF. The top of the page contains a lengthy CSS style declaration: <xsl:attribute-set name="Header"> <xsl:attribute name="font-size"> <xsl:value-of select="$font-size"/> < ...

cssxmlxslt

html interactive/expandable tree

I've come across this code which generates an HTML tree, but I'm facing an issue where the tree expands every time I refresh the page. What I want to achieve is to have certain branches expanded and others collapsed when the page is opened, depe ...

javascriptjqueryhtmlcss

How can I change :hover to a clickable element instead?

I attempted to create a full-width accordion with the following code: .page { margin: 0; padding: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100vh; } .content { -webkit- ...

javascriptjqueryhtmlcss

Why is PHP unable to identify the custom-designed CSS button upon submission?

I'm having a design issue where the button on my form is not being detected. I've tried various methods like changing the class name, assigning it a name via HTML, but nothing seems to work. Here is my button: .blue_button { background: #005b66; ...

phpcss

Images of equal height without compromising the resolution

How can I create responsive images with the same height inside a DIV tag, with a specified height of 200px? Any assistance would be greatly appreciated. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="desc ...

htmlcss

Disabling the child element from triggering the parent element's onclick function, while still allowing it to respond to its own content

My list elements have onclick-functions that change the display of each element and its child div, moving them to the top of the list. Clicking again reverses this effect. The issue arises because the child div contains search fields, clickable pictures, ...

javascripthtmlcss

Cover the entire section with an image

I'm aiming to achieve a similar layout like this (using tailwind) : https://i.stack.imgur.com/G0oti.png Here's the current setup: <section class="bg-juli-white pt-24"> <div class="max-w-6xl mx-auto flex flex-col" ...

csstailwind-css