как выровнять текст внутри круга div

0

Я хочу выровнять текст так, чтобы он был в следующем порядке:

ФОТОГРАФИЯ И ЦИФРОВОЕ ИСКУССТВО (каждое слово должно совпадать с предыдущим словом)

вот ссылка на скрипку: 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;
}
  • 0
    Должны ли быть ФОТОГРАФИЯ или ЦИФРОВОЕ ИСКУССТВО на одном уровне?
  • 0
    @antindexer нет, это должно быть в отчаянном ряду
Показать ещё 1 комментарий
Теги:

2 ответа

2
Лучший ответ

Если бы я правильно понял ваш вопрос, это может сработать для вас...

[ДЕМО]

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, чтобы обеспечить лучший контроль. Но, учитывая исходный код, это казалось простым простейшим решением для получения эффекта, который вы ищете.

Поделиться
  • 0
    В моем ответе также предполагается, что вы хотите, чтобы все слова показывали ВНУТРИ круга, а не под ним, как в исходном коде.
  • 0
    Большое спасибо!! действительно помогло ...
Показать ещё 1 комментарий
2

Если вы имеете в виду, что вы намерены вертикально и горизонтально центрировать свой текст в круге, вы можете попробовать этот метод:

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

Элемент <span> позволяет нам размещать текст независимо от самого круга, и я взял на себя смелость преобразовать текст в обычный случай предложения и затем преобразовать его в верхний регистр с помощью CSS. Символ & также был заменен его эквивалентом сущности HTML, &amp; ,

Я также внесли некоторые изменения в ваш 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%;
}

Смотрите здесь скрипку:

JSFidde

Поделиться
  • 0
    это то, что я хочу сказать на этот вопрос. Ап проголосовал. И этот метод, я думаю, является лучшей практикой по сравнению с другим ответом.
  • 0
    Проблема с этим ответом состоит в том, что он не обеспечивает решение, запрошенное OP. Каждое слово НЕ находится в отдельной строке, так как упомянутый ОП является обязательным требованием.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню