2011-10-14 2 views
6

를 작동하지 않는 텍스트 정렬 : 나는 campainText는 오른쪽 정렬 싶습니다디스플레이 : 테이블과 오른쪽 나는이 같은 HTML 구조를 가지고

<div class="campain"> 
    <div class="campainText"> 
     <a href="#"><h2>Ny app til iPhone og iPad</h2></a> 
     <a href="#"><h2>Tips og vinn</h2></a> 
    </div> 
    <div class="campainPicture"> 
     Picture goes here 
    </div><div class="clear"></div> 
</div> 

합니다. 이 요소에 대한 CSS는 다음과 같습니다.

font-family: 'Spinnaker', sans-serif; 
font-size: 17px; 
color: #FFFFFF; 
background-color: #A2AD00; 
display: table; 
padding: 4px; 
margin: 4px 4px 4px 4px; 
text-decoration: none; 

저는 CSS의 나머지 부분이 작동하고 있음을 알고 있습니다. 문제는 display-field에 table-option을 포함 시키면 텍스트가 왼쪽 정렬된다는 것입니다. 이것을 제거하자마자 예상대로 작동합니다. 이 문제를 해결할 수있는 방법이 있습니까? 아니면 display : inline 및 <br /> 태그를 사용해야합니까?

답변

13

바이올린 : 테이블 요소는 기본적으로 전체 폭에 스트레칭하지 않기 때문에

http://jsfiddle.net/xbNCZ/을 "표 + text-align:right이 작동하지 않습니다." 원하는 결과를 얻으려면 width:100%을 추가하십시오.

Before/After 설정 width:100%.

+1

텍스트 정렬을 사용하려면 요소의 너비를 설정해야하지만 너비는 100 % 일 필요는 없습니다. –

+0

@ Jan-Henk 너비가 작 으면 원하는 결과가 나오지 않습니다. OP는 일반적인'div' 요소의 크기 인'100 %'와 같은 너비를 요청했습니다. –

+0

방금 ​​텍스트 정렬 속성이 작동하지 않는 이유를 설명하기 위해이 메모를 추가 메모로 추가했습니다. 이는 너비가 설정되지 않았기 때문입니다. 당신은 OP가 100 % 너비가 필요하다는 것이 옳습니다. –

관련 문제