Я хочу выровнять текст так, чтобы он был в следующем порядке:
ФОТОГРАФИЯ И ЦИФРОВОЕ ИСКУССТВО (каждое слово должно совпадать с предыдущим словом)
вот ссылка на скрипку: 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;
}
Если бы я правильно понял ваш вопрос, это может сработать для вас...
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 я уменьшил высоту линии от 650 пикселей до 80 пикселей, так что между каждым словом не было гигантского разрыва.
Есть, вероятно, много других способов сделать это... текст может быть даже лучше внутри его собственного элемента DIV, вложенного в круг DIV, чтобы обеспечить лучший контроль. Но, учитывая исходный код, это казалось простым простейшим решением для получения эффекта, который вы ищете.
Если вы имеете в виду, что вы намерены вертикально и горизонтально центрировать свой текст в круге, вы можете попробовать этот метод:
<div id="circle">
<span>Photography & Digital Art</span>
</div>
Элемент <span>
позволяет нам размещать текст независимо от самого круга, и я взял на себя смелость преобразовать текст в обычный случай предложения и затем преобразовать его в верхний регистр с помощью CSS. Символ &
также был заменен его эквивалентом сущности HTML, &
,
Я также внесли некоторые изменения в ваш CSS.
line-height
. Именно по этой причине вторая строка вышла из элемента. Вы можете указать его в #cirlce span {...}
вместо этого, если хотите.<span>
элемент <span>
внутри родителя абсолютно и 50% сверху с position: absolute; top: 50%;
position: absolute; top: 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%;
}
Смотрите здесь скрипку: