Question

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

拍摄＆安培; 数字艺术（每个单词应该在prev字下对齐）

#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

如何在圆div内对齐文本

2 个答案: