Установка заголовка в середине изображения / значка кнопки с помощью Vaadin

введите описание изображения здесьС помощью CSS я могу заставить v.nativebutton выглядеть так, как я хочу, но я не могу сделать так, чтобы подпись находилась прямо посередине моего значка / изображения. Прилагается снимок экрана того, как выглядит кнопка, когда я добавляю text -align: center в свою таблицу стилей CSS. Есть идеи, как я могу установить заголовок кнопки прямо посередине моего изображения значка? Я хочу показать внутри кружка метку «Студенты»?

ИСПОЛЬЗОВАНИЕ CSS IM:

.v-nativebutton-center-text .v-nativebutton-caption {
display: block;
white-space: normal;
text-align: center;
}
.v-nativebutton::-moz-focus-inner {
border: none;
padding: 0;
 }
 .v-nativebutton-center-text span {
  font-size: x-small;
  text-shadow: #fafafa 1px 1px 0;
}
.v-nativebutton-center-text img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5px;

 }

uibutton css vaadin
person Warz    schedule 10.10.2011    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Если вы вызвали

button.addStyleName ("центральный текст");

на вашей собственной кнопке следующий CSS будет центрировать текст:

Следующий CSS будет центрировать заголовок по разрывам строки:

.v-nativebutton-center-text .v-nativebutton-caption {
    display: block;
    white-space: normal;
    text-align: center;
}
person Ingo Kegel    schedule 10.10.2011
comment
Я попытался добавить предложенный вами CSS, и он показал подпись справа от изображения. Я добавил CSS, который использую для этой конкретной кнопки. Не показывает подпись в середине изображения - person Warz; 11.10.2011
comment
проблема была в размере моего изображения. Я должен был сопоставить это. Спасибо за помощь - person Warz; 11.10.2011
comment
@Warz Почему вы принимаете это как ответ, если это не решает вашу проблему? - person b1nary.atr0phy; 01.08.2013
comment
@ b1naryatr0phy Причина, по которой я принял это как ответ, связана с предоставленным css. В итоге я использовал оба свойства text-align и white-space вместе с изменением размера изображения. - person Warz; 05.08.2013

arrow_upward
0
arrow_downward

У меня нет опыта работы с vaadin, поэтому я прошу прощения, если мой совет не имеет отношения к vaadin, но я все равно пойду и перезвоню!

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

Я бы посоветовал установить относительное позиционирование элемента круга и абсолютное позиционирование заголовка, а затем расположить заголовок посередине. Вот одно решение:

#circle {
    position: relative;
}

#caption {
    position: absolute;
    top: 75px; /* Whatever half of the circle is */
    left: 50%;
    width: 50px;
    margin: 0 0 0 -25px /* Sets margin-left to half of the width of the caption */
}

Если вы установите относительное позиционирование #circle и абсолютное позиционирование #caption, заголовок будет размещен в верхнем правом углу круга поверх него. Затем вы можете установить свойство «top» равным половине общей высоты круга, чтобы поместить его в центр круга по оси Y. Если вы установите для свойства left заголовка значение 50%, а затем зададите ему отрицательное левое поле, равное половине его ширины, он должен идеально отцентрировать его. Убедитесь, что вы установили #circle на относительное позиционирование, иначе подпись может располагаться абсолютно относительно всей страницы, а не только вокруг круга.

Если это не сработает, дайте мне знать, потому что есть и другие возможные решения. Один из них предполагает использование вместо этого margin: 0 auto для центрирования подписи.

Надеюсь, это поможет!

person Hendeca    schedule 10.10.2011
comment
я добавил свой CSS. Я пытаюсь реализовать ваш подход, изменяя положение изображения (кружка) и заголовка. не могли бы вы уточнить? - person Warz; 11.10.2011