Vaadin을 사용하여 버튼 이미지/아이콘 중간에 캡션 설정

Question

CSS를 통해 원하는 방식으로 v.nativebutton을 얻을 수 있지만 캡션을 중간에 가져올 수는 없습니다. 아이콘/이미지. 첨부 된 것은 텍스트를 추가 할 때 단추 모양을 보여주는 스크린 샷입니다. -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; 

} 

Answer 1

호출 한 경우

button.addStyleName ("center-text"); 줄 바꿈을 건너

이

다음 CSS는 캡션을 중심합니다 : 난 내 CSS를 추가

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

Answer 2

내 조언을 angel이라는 관련이없는 경우 그래서 사과 angel이라는 경험이 아니지만, 내가 먼저 가서 어쨌든 차임거야!

코드를 게시하는 것이 도움이 될 수 있습니다 (지정된 요소의 CSS 및 HTML).하지만 여전히 도움을 줄 수 있다고 생각합니다.

원의 위치를 ​​상대적으로 설정하고 캡션을 절대 위치로 설정 한 다음 캡션을 가운데에 배치하는 것이 좋습니다. 여기에 하나 개의 솔루션 : 당신이 상대에 #circle 위치와 절대에 #caption 위치를 설정하면

#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 */ 
} 

, 그것의 상단에, 원의 오른쪽 상단에 캡션을 배치합니다. 그런 다음 "top"속성을 원의 전체 높이의 절반으로 설정하여 y 축의 원 중심에 배치 할 수 있습니다. 캡션의 left 속성을 50 %로 설정 한 다음 너비의 절반에 해당하는 음수의 왼쪽 여백을 지정하면 완벽하게 가운데에 맞춰야합니다. #circle을 상대 위치로 설정했는지 확인하십시오. 그렇지 않으면 캡션이 원과 반대로 전체 페이지를 기준으로 절대적으로 배치 될 수 있습니다.

그래도 해결되지 않으면 가능한 다른 해결책이 있으므로 알려 주시기 바랍니다. 하나는 여백을 사용하는 것입니다 : 자막 중심에 0 자동 대신.

도움이 되었기를 바랍니다.