how to align text inside a circle div

Question

i want to align the text so that it will be in the following order:

PHOTOGRAPHY & DIGITAL ART (every word should aligned under the prev word)

here is the fiddle link: http://jsfiddle.net/5xFVc/

#circle {
   background-color: rgba(0, 0, 0, 0.3);   width: 650px;
   height: 650px;
   border-radius: 50%;
   line-height: 650px;
   text-align: center;
   border: 2px solid #ffe720;
   color: #ffe720;
   z-index: 50;
   font-family: "HelveticaNeueUltraLight", "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light",         "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif; font-weight:100; font-stretch:normal; 
   font-size: 65px;
}

Answer 1

If I understood your question correctly, this might work for you...

[DEMO]

HTML

<div id="circle">
    <br/><br/>PHOTOGRAPHY<br/>&<br/>DIGITAL<br/> ART
</div>

CSS

#circle {
   background-color: rgba(0, 0, 0, 0.3);   width: 650px;
   height: 650px;
   border-radius: 50%;
   line-height: 80px;
   text-align: center;
   border: 2px solid #ffe720;
   color: #ffe720;
   z-index: 50;
   font-family: "HelveticaNeueUltraLight", "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light",         "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif; font-weight:100; font-stretch:normal; 
   font-size: 65px;
}

In the HTML, I added line breaks to make each word show on it's own line. In the CSS, I decreased the line height from 650px to 80px, so that there wasn't a giant gap between each word.

There are probably many other ways to do this... the text might even be better within it's own DIV element, nested inside the circle DIV, to give better control. But given your initial code, this seemed the simplest solution to get the effect you are looking for.

Answer 2

If you mean you intend to vertically and horizontally center your text in the circle, you can try this method:

<div id="circle">
    <span>Photography &amp; Digital Art</span>
</div>

The <span> element allows us to position the text independently from the circle itself, and I have taken the liberty to convert your text to normal sentence case, and then convert it to uppercase using CSS. The & character has also been substituted with its HTML entity equivalent, & .

---

I have made some changes to your CSS, too

• I have removed the line-height attribute. It is the reason why the second line got pushed out of the element. You can specify it in the #cirlce span {...} instead, if you wish.
• I positioned the <span> element within the parent absolutely and 50% from the top with position: absolute; top: 50%; position: absolute; top: 50%; . I then transformed it with a translateY(-50%) so that it is offset negatively towards the top by half of its computed height, achieving the effect of vertically centering it within its parent element.

Here is the revised CSS:

#circle {
    background-color: rgba(0, 0, 0, 0.3);
    width: 650px;
    height: 650px;
    border-radius: 50%;
    text-align: center;
    border: 2px solid #ffe720;
    color: #ffe720;
    z-index: 50;
    font-family:"HelveticaNeueUltraLight", "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif;
    font-weight:100;
    font-stretch:normal;
    font-size: 65px;
    position: relative;
}
#circle span {
    display: block;
    text-align: center;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    /* Unfortunately transform needs to be prefixed for webkit browsers :( */
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    width: 100%;
}

See working fiddle here:

JSFidde