html - 如何对齐圆div内的文本

Question

我想对齐文本，使其按以下顺序排列:

摄影 &数字艺术(每个词都应该在前一个词的下方对齐)

这是 fiddle 链接: 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 中，以提供更好的控制。但鉴于您的初始代码，这似乎是获得所需效果的最简单解决方案。