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

ProgramBox

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

Post author:admin
Запись опубликована:8 марта, 2023
Post category:Вопросы по программированию

#css #uibutton #vaadin

Вопрос:

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

CSS Я ИСПОЛЬЗУЮ:

 .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;

 }

Ответ №1:

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

button.addStyleName(«center-text»);

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

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

 .v-nativebutton-center-text .v-nativebutton-caption {
    display: block;
    white-space: normal;
    text-align: center;
}

1. Я попытался добавить тот CSS, который вы предложили, и он показал заголовок справа от изображения. Я добавил CSS, который я использую для этой конкретной кнопки. Не отображает заголовок в середине изображения

2. проблема заключалась в размере моего изображения. Я должен был его сопоставить. Спасибо за помощь

3. @Warz Почему вы принимаете это как ответ, если это не решает вашу проблему?

4. @b1naryatr0phy Причина, по которой я принял это как ответ, была связана с предоставленным css. В итоге я использовал оба свойства text-align amp; white-space вместе с изменением размера моего изображения.

Ответ №2:

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

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

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

 #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 для центрирования заголовка.

Я надеюсь, что это поможет!