how can i center the text inside my css div circle


Tags: css

Problem :

This is my css

.circle{
 border-radius:50%;
 border:5px solid black;
 width:100px;
 height:100px;
 box-shadow: 0 0 5px 2px rgba(0,0,0,.35);
 font-family:Century Gothic;
 color:black;
 text-align:center;

 }

.circle:hover{
background-image:url(../images/stardust.png) ; 
 color:#FCB326;
 border:5px solid #56a7ba;
}

How can make the text center of circle ? I have try my best to center it but still fail. enter image description here



Solution :

Use display: table-cell; + vertical-align: middle;

Fiddle

.circle {
    border-radius:50%;
    border:5px solid black;
    width:100px;
    height:100px;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, .35);
    font-family:Century Gothic;
    color:black;
    text-align:center;
    display: table-cell;
    vertical-align: middle;
}

    CSS Howto..

    how to code different type of border in css?

    How to cancel HTML “onfocus” behavior?

    Why is Nexus 4 (using Chrome for Android) showing window size as 384x519 but screenshot shows 768x1038?

    How do I add colored corners to a background image?

    How do I require main.css.erb in application.css

    How to get Jsfiddles working on a website? [duplicate]

    DOMPDF - How to render PDF to have no margins at all?

    How do I stop my 'body' from eating my 'foot'

    CSS puzzle: How to add background-image and set height/width on empty span?

    Phonegap : how Control the font size of the Mobile?

    how can I reload a “CSS background-image” each time I hover on it?

    How to move items to left inside a div?

    How do I pick an image from a set of images on my Ajax form?

    How to apply a sifr rule to a hyperlink and also its a.active counterpart

    How to property adjust table?

    How to change the CSS of page dynamically based on value?

    How to make the height of the div take all the space?

    How can I add specific css id to parent menu with php or javascript

    how to : change css class of a button in a parent window with javascript or jquery?

    How to improve the rendering of my HTML/CSS button?

    How to stick a div when scrolled past 50% of the item?

    How to rotate an image with CSS style transform by an variable of degree?

    How do I make footer take 100% of the width of the webpage?

    How to get an ellipsis to display on text in CSS

    how to combine multiple css class selectors for jquery buttonset?

    How do I keep a grid-type-arrangement of floating div elements centered in their container at various screen widths? [closed]

    how to make row span column content start at the top of the column with css and html

    How to set input text color, but not placeholder color, in IE11

    I have a simple image picture slider with JQuery, but I do not know how to animate up or down

    SharePoint 2007 popup rich text editor displays corporate logo from master page - how can I remove this?