필드 집합에서 텍스트를 세로 및 가로로 맞 춥니 다

Question

이 질문을 여러 번 물어 보았습니다. 그냥 재미 있지는 않지만 내 문제를 바로 잡을 해결책을 찾지 못했습니다.

PHP 페이지에 여러 개의 필드 세트가 있습니다. 각 필드의 내용은 데이터베이스에서 가져온 텍스트 블록이됩니다. fieldset 내부의 텍스트를 세로 및 가로로 정렬하고 싶습니다. 수평 부분은 분명히 텍스트 정렬과 함께 간단하지만 수직 정렬은 그렇게 간단하지 않습니다.

결과 HTML 마크 업 : 아래

<div class="s_container3"> 
<a href="custom.php?page=19"> 
    <fieldset class="services_title2"> 
     Some Short Text 
    </fieldset> 
</a> 
<a href="custom.php?page=18"> 
    <fieldset class="services_title2"> 
     More Short Text 
    </fieldset> 
</a> 
<a href="custom.php?page=20"> 
    <fieldset class="services_title2"> 
     Some long text that spills onto the second line 
    </fieldset> 
</a> 
<a href="custom.php?page=21"> 
    <fieldset class="services_title2"> 
     More short text again 
    </fieldset> 
</a> 
<span class="stretch"></span> 
</div> 

는 내가 다른 곳에서 충돌이 없었 확인하기 위해 밖으로 제거 모든 여분 관련이없는 CSS를 가지고, 내가 함께 연주 한 jsfiddle에 대한 링크입니다.

jsfiddle example

당신은 텍스트 그냥 필드 셋의 상단에 붙어 것을 볼 수 있습니다. 나는 내부 div 컨테이너와 그 밖의 모든 것들을 햇빛 아래에 넣으려고했지만 너무 오랫동안이 문제를 꼼짝 않고 바라보고 있었기 때문에 더 이상 나에게 의미가 없으므로 간단한 해결책이 빠져있다.

어떤 도움을 주시면 감사하겠습니다. 어떤 방법 으로든 텍스트를 이동할 수 있습니다.

정보가 더 이상 필요하지 않으면 그냥 물어보십시오! 사전에

감사

당신은 너무 당신의 FIELDSET 클래스에 줄 높이를 설정할 수 있습니다

Answer 1

:

 html, body { 
height:100%; 
} 

     div { 
margin-left:auto; 
margin-right:auto; 
margin-top:0px; 
margin-bottom:0px; 
} 

     div.s_container3 { 
width:570px; 
text-align:justify; 
} 
fieldset.services_title2 { 
    border:none; 
    font-size:1.3em; 
    width:215px; 
    min-height:45px; 
    vertical-align:middle; 
    text-align:center; 
    color:#ffffff; 
    background-color:#1c86b5; 
    margin-top:10px; 
    margin-left:auto; 
    margin-right:auto; 
    display:inline; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    border-radius: 10px; 
    line-height: 45px; 
    } 

     .stretch { 
width:100%; 
display:inline-block; 
font-size:0; 
line-height:0; 
} 
     a { 
text-decoration:none; 
} 

http://jsfiddle.net/5H6Lf/