Разрыв строки внутри круглой кнопки не работает

Question

Разрыв строки внутри круглой кнопки не работает

0

Я создал круглую форму с прямоугольной кнопкой, используя CSS:

.round-button {
    display:block;
    width:100px;
    height:100px;
    line-height:100px;
    border:2px solid #29966c;
    border-radius: 50%;
    color:#FFF;
    text-align:center;
    text-decoration:none;
    background: #FFFFFF;
    box-shadow: 0 0 3px gray;
    font-size:20px;
    font-weight:bold;           
}

и использовал его в html5 следующим образом:

<div align="center">
    <a href="#" class="round-button">
        <font color="#29966c" id="demo"></font>
    </a>
</div>

Теперь я хочу создать разрыв строки внутри круглой кнопки,

<div align="center"> 
    <a href="#" class="round-button">
         <font color="#29966c" id="demo">hello <br />world</font>
    </a>
</div>

Таким образом, "мир" выходит из круглой кнопки.

Я хочу, чтобы оба слова были в другой строке, но они оба останутся в круглом окне кнопки.

user3577669 27 апр. 2014, в 09:06

Источник

Теги:

javascript

html

css

5 ответов

1

Поскольку ваша line-height равна width вашего css, "мир" выходит из круглой кнопки. если вы установили line-height до 50px, вы получите текст с выравниванием по вертикали в кнопке.

GRIM2D 27 апр. 2014, в 04:49

0

его проблема с высотой линии. потому что высота 100px, а высота линии также равна 100 px, поэтому она показывает кнопку.

.round-button {
    display:block;
    width:100px;
    height:100px;
    line-height:50px;
    border:2px solid #29966c;
    border-radius: 50%;
    color:#FFF;
    text-align:center;
    text-decoration:none;
    background: #FFFFFF;
    box-shadow: 0 0 3px gray;
    font-size:20px;
    font-weight:bold;

}

вы также можете использовать приведенный ниже код, чтобы сохранить слова в центре.

.round-button {
    display:block;
    width:100px;
    height:75px;
    padding-top:25px;
    line-height:25px;
    border:2px solid #29966c;
    border-radius: 50%;
    color:#FFF;
    text-align:center;
    text-decoration:none;
    background: #FFFFFF;
    box-shadow: 0 0 3px gray;
    font-size:20px;
    font-weight:bold;

}

WAQAS AJMAL 27 апр. 2014, в 05:38

0

Высота линии - 100 пикселей. сделайте это вместо этого:

http://jsfiddle.net/VS7sJ/

.round-button {
    display:block;
    width:100px;
    height:100px;
    line-height:1em;
    border:2px solid #29966c;
    border-radius: 50%;
    color:#FFF;
    text-align:center;
    text-decoration:none;
    background: #FFFFFF;
    box-shadow: 0 0 3px gray;
    font-size:20px;
    font-weight:bold;
}
span {
    padding:20px 0 0;
    display:block
}

line-height:1em и оберните текст span

<div align="center"> <a href="#" class="round-button"><span><font color="#29966c" id="demo">hello <br />world</font></span></a>
</div>

Unamata Sanatarai 27 апр. 2014, в 04:44

0

Проблема в том, что "line-height: 100px;" толкает вторую линию вниз на 100 пикселей, попробуйте следующее:

.round-button{
    display:block;
    width:100px;
    height:80px;
    padding-top: 20px;
    border:2px solid #29966c;
    border-radius: 50%;
    color:#FFF;
    text-align:center;
    text-decoration:none;
    background: #FFFFFF;
    box-shadow: 0 0 3px gray;
    font-size:20px;
    font-weight:bold;
}

Возможно, вам придется играть с высотой и отступом, чтобы получить правильный смещение сверху. Помните, что высота исключает заполнение, поэтому вычитайте отступы с высоты.

thexacre 27 апр. 2014, в 03:53

Ещё вопросы

James Duffy · Accepted Answer · 2014-04-27T04-18-00.000Z

Как упоминалось выше, line-height:100px означает, что каждая строка текста должна быть 100 пикселей высотой. Это будет работать, чтобы вертикально центрировать одну строку текста (если контейнер также высотой 100 пикселей), но не будет работать, если он больше 2 строк текста.

Чтобы вертикально центрировать контент независимо от количества строк, вы можете использовать:

display: table-cell;
vertical-align: middle;

Скрипт: http://jsfiddle.net/PDPTV/

(Примечание. Тег <font> не поддерживается в HTML5. Двигаясь вперед, вы должны использовать CSS для указания цветов шрифта. Также атрибут align=center также не поддерживается, поэтому вы должны использовать другой метод для центра вашего контента, но это для всей другой темы при переполнении стека.)