如何對齊文本一圈DIV

Question

我要對齊的文本，以便它會按以下順序中：

拍攝 & DIGITAL ART （每個字要在上一個字下對齊）

這裏是小提琴鏈接： 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

如果我理解正確你的問題，這可能爲你工作...

[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; 
} 

在HTML，我添加換行符，使在它自己的行中的每個字顯示。在CSS中，我將行高從650px降低到80px，這樣每個單詞之間沒有巨大的差距。

可能有很多其他方法可以做到這一點...文本甚至可以在它自己的DIV元素中嵌套，嵌套在圓DIV中，以提供更好的控制。但是，考慮到您的初始代碼，這似乎是獲得所需效果的最簡單解決方案。

Answer 2

如果你的意思是你打算垂直和水平居中的圓你的文字，你可以試試這個方法：

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

的<span>元素讓我們的文字分別從圓自己的位置，我已冒昧地將您的文本轉換爲正常的句子，然後使用CSS將其轉換爲大寫。 &字符也被替換爲其相應的HTML實體&。

---

我做了一些更改CSS，太

• 我已經刪除了line-height屬性。這就是爲什麼第二行被排除在元素之外的原因。如果您願意，您可以改爲在#cirlce span {...}中指定它。
• 我把<span>元素定位在父母的絕對位置，並且從position: absolute; top: 50%;的頂部定位了50％。然後，我用translateY(-50%)對它進行了轉換，以便它向上偏移一半的計算高度，從而實現垂直居中其父元素的效果。

下面是修改後的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%; 
} 

看到這裏的工作小提琴：

JSFidde