버튼의 오른쪽 하단에 텍스트를 배치하십시오.

저는 한동안이 작업을 수행하는 방법에 대한 해답을 찾고 있습니다. 기본적으로 내가 원하는 것은 버튼의 오른쪽 하단 모서리에 텍스트를 배치하는 것입니다. 이것은 내가 지금까지 가지고있는 것이다. 오른쪽에 텍스트가 정렬되어 있지만 여전히 단추 중간에 있습니다. 어떻게 그것을 바닥과 정렬 할 수 있습니까? 이 같은버튼의 오른쪽 하단에 텍스트를 배치하십시오.

.button{ 
    height: 50px; 
    width: 50px; 
    text-align: right; 
}

출처

2013-01-17 Zamereon

HTML을 볼 수 있습니까? – showdev

뭔가 : http://jsfiddle.net/QavgZ/

HTML :

<a class="button">text</a>

CSS :

.button{ 
    height: 14px; 
    width: 50px; 
    text-align: right; 
    display: block; 
    border: 1px solid red; 
    font-size: 14px; 
    line-height: 14px; 
    padding-top: 36px; 
}

이미 발견 우측 정렬. 아래쪽 정렬을 위해 버튼, 텍스트 및 글꼴 크기를 모두 동일한 값으로 설정했습니다. 그런 다음 상단 패딩을 추가하여 높이가 원하는 50px (실제 높이 = 높이 + 패딩)가되도록합니다.

출처

2013-01-17 21:32:45 Pevara

특정 버튼 내용에 적용됩니다. 그러나 역동적 인 내용에 대해서는 매우 유연하지 않습니다. http://jsfiddle.net/QavgZ/1/ – showdev

이것은 내가 필요한 것에 적합합니다. 고마워! – Zamereon

당신은 @showdev에 대해 절대적으로 옳습니다. 당신은 테이블 셀 솔루션으로 갈 수도 있지만, 나는 그걸 좋아하지 않습니다. 내 경험 에선 버튼 하나에 텍스트가 한 줄 이상 나오지 않습니다. 오버플로 : 숨김을 추가하여 확실히 확인해야하지만 – Pevara

버튼의 오른쪽 하단에 텍스트를 배치하십시오.

답변

관련 문제