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

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

0 голосов
/ 10 октября 2011

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

CSS IM USING: 

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

 }

Ответы [ 2 ]

2 голосов
/ 10 октября 2011

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

button.addStyleName ("center-text");

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

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

.v-nativebutton-center-text .v-nativebutton-caption {
    display: block;
    white-space: normal;
    text-align: center;
}
0 голосов
/ 10 октября 2011

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

Может быть полезно опубликовать код, который у вас есть (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 для центрирования заголовка.

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

...