위치 지정 테이블

-1

텍스트를 이미지 가운데에 위치 시키려고합니다.위치 지정 테이블

<table width="261" height="253" cellspacing="0" cellpadding="0" align="left" style="margin-left: 0px; margin-top: 0px; margin-right: 5px; border-collapse: collapse;"> 
    <tbody> 
    <tr> 
     <td style="vertical-align: top; letter-spacing: 0px; word-spacing: 0px; background-image: none; background-repeat: repeat; background-position: 0% 0%; height: 235px; padding-left: 10px; padding-right: 10px; padding-top: 0px;"> 
     <p> 
      <table width="" cellpadding="0" align="center" style="border-collapse: collapse; margin-top: 0px; margin-right: 0px; margin-left: 40px; width: 189px; height: 121px;"> 
      <tbody> 
       <tr> 
       <td><span style="font-family: Tahoma;"><span style="font-weight: bold;">Lorem Ipsum</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer </span></td> 
       </tr> 
      </tbody> 
      </table><img src="/resource/resmgr/boxes/box_connect2.png" title="" alt="" /></p></td> 
    </tr> 
    </tbody> 
</table>

출처

2013-03-07 Fred Carter

에 오신 것을 환영합니다 스택 오버플로 :

은 여기에 정리하고 하나 개의 가능한 솔루션입니다! 귀하의 연구를 공유하는 것은 모든 사람들을 돕습니다. 귀하가 무엇을 시도했는지 그리고 왜 이 귀하의 필요를 충족시키지 않았는지 저희에게 알려주십시오. 이것은 당신이 자신을 돕기 위해 시간을 보냈다는 것을 보여줍니다. 확실한 대답을 되풀이하지 말고, 그리고 그 중에서도 가장 구체적이고 관련성있는 답변을 얻는 데 도움이됩니다. [질문하는 방법]을 참조하십시오. –

레이아웃 용도로 표를 사용하지 마십시오. 수직 중심 맞춤을 위해 동작을 사용하려면 비 테이블 요소에'display : table'과'display : table-cell'을 사용하십시오. – cimmanon

먼저 CSS를 인라인과 적절한 CSS 파일에서 가져 오십시오. HTML

http://jsfiddle.net/UD2XV/

<table cellspacing="0" cellpadding="0" class="outer_table"> 
    <tbody> 
    <tr> 
     <td class="outer_td"> 

      <table width="" cellpadding="0" class="inner_table"> 
      <tbody> 
       <tr> 
       <td> 
        <span class="inner_text">Lorem Ipsum</span> 
        is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry's standard dummy text ever since 
        the 1500s, when an unknown printer 
       </td> 
       </tr> 
       <tr> 
        <td> 
         <img src="/resource/resmgr/boxes/box_connect2.png" title="" alt="" /> 
        </td> 
       </tr> 
      </tbody> 
      </table> 

     </td> 
    </tr> 
    </tbody> 
</table>

CSS

.outer_table { width:261px; height:253px; margin-left: 0px; margin-top: 0px; margin-right: 5px; border-collapse: collapse; text-align:left;} 

.inner_table{border-collapse: collapse; margin-top: 0px; margin-right: 0px; margin-left: 40px; width: 189px; height: 121px; text-align:center;} 

.outer_td {vertical-align: top; letter-spacing: 0px; word-spacing: 0px; background-image: none; background-repeat: repeat; background-position: 0% 0%; height: 235px; padding-left: 10px; padding-right: 10px; padding-top: 0px;} 

.inner_td{font-family: Tahoma;} 

.inner_text {font-weight: bold; font-family: Tahoma;}

출처

2013-03-07 14:11:50 Lowkase

그 동안,'table' 요소를 사용하지 않고 이것을 수행하는 방법을 보여 주었어야합니다. – cimmanon

나는 그것에 대해 생각했지만 코드를 보면 OP가 초보자 인 것처럼 보입니다. 나는 그것이 도움이되는 것 이상으로 혼란 스러울 수 있으므로 질문의 범위를 벗어나고 싶지 않았습니다. – Lowkase

위치 지정 테이블

답변

관련 문제