텍스트 Div를 사용하여 문제 정렬

이 div 테이블/열/행의 텍스트를 각 문장에 해당하는 이미지의 중간에 정렬하려고합니다. 그러나 지금까지, 그것이 내게주는 모든 것은 최고의 정렬 된 느낌의 더 많은 것입니다. 누구든지 이걸 도와 줄 수 있니?텍스트 Div를 사용하여 문제 정렬

CSS :

.div-table { 
    display:table; 
    width:776px; 
    height: auto; 
    background-color:#eee; 
    border:1px solid #666666; 
    border-spacing:5px; 
    /*cellspacing:poor IE support for this*/ 
    clear: both; 
} 
#image-middle { 
    vertical-align: middle; 
    float: left; 
    padding-right: 2px; 
    padding-top: 2px; 
    padding-bottom: 2px; 
} 
.div-table-row { 
    display:table-row; 
    width: 776px; 
    float: left; 
    clear: both; 
} 
.div-table-col-first { 
    display:table-column; 
    width:49%; 
    float: left; 
}

HTML : 아래

<div class="div-table"> 
    <div class="div-table-row"> 
     <div class="div-table-col-first"> 
      <img width="50" height="50" id="image-middle">First Image Text in the first column and sentence</div> 
     <div class="div-table-col-first">Second Column Headline 
      <br /> 
      <img alt="Checkbox" width="30" height="30" id="image-middle">First Image Second Column Text 
      <br /> 
      <br /> 
      <img id="image-middle" alt="Padlock in a circle">Second Image Second Column Text</div> 
    </div> 
    <div class="div-table-row"> 
     <div class="div-table-col-first"> 
      <img width="50" height="78" id="image-middle">Second Image Text in the first column and sentence</div> 
     <div class="div-table-col-first"> 
      <img id="image-middle" alt="Pie Chart">Third Image Second Column Text 
      <br /> 
      <br /> 
      <img id="image-middle" alt="A Cover for a Safe">Fourth Image First column Text</div> 
    </div> 
</div>

위의 마크 업에 의해 생성 된 JSFiddle이다.

JSFiddle

출처

2014-07-07 user3813799

를 참조하십시오. –

내가 어디서부터 시작해야할지 몰라서 여기에 많은 잘못이있다. 귀하의 html을 더 잘 구조화해야합니다.
등을 삭제하고, [바이올린] (http://jsfiddle.net)이 좋을 것입니다. – feitla

첫째, 이미지와 별도로 텍스트 줄 바꿈 (http://jsfiddle.net/L9FnJ/) 이것은 내가 모든 코드를 정리하거나 모든 작업을 수행하지만,이 당신을 말해야하지거야, 당신이 시작하는 것입니다 그것을 수행하는 방법 :

<body> 
    <div class="div-table"> 
     <div class="div-table-row"> 
      <div class="div-table-col-first"> 
       <div class="colImg"><img width="50" height="50" id="image-middle" /></div><div class="colText">First Image Text in the first column and sentence</div> 
      </div> 
      <div class="div-table-col-first">Second Column Headline<br /> 
       <img alt="Checkbox" width="30" height="30" id="image-middle">First Image Second Column Text<br /> 
       <br /> 
       <img id="image-middle" alt="Padlock in a circle"> Second Image Second Column Text    </div> 
     </div> 
     <div class="div-table-row"> 
      <div class="div-table-col-first"><img width="50" height="78" id="image-middle">Second Image Text in the first column and sentence</div> 
      <div class="div-table-col-first"><img id="image-middle" alt="Pie Chart"> 
       Third Image Second Column Text<br /> 
       <br /> 
       <img id="image-middle" alt="A Cover for a Safe"> Fourth Image First column Text</div> 
     </div> 
    </div> 
</body> 
</html>

그런 다음 CSS에서,이 추가

당신은 확실히 요소 내에서 텍스트를 포장하고, feitla의 코멘트 @ 볼 필요가

.colImg, .colText { 
display: table-cell; 
vertical-align: middle; 
}

출처

2014-07-07 20:08:13 VikingBlooded

바이킹, 감사합니다! 나는 내 손을 잡고 싶지 않았고 당신이 제공 한 작은 정보가 전체 페이지를 고치는 데 충분했다. 나는 단지 그것을 조금 다르게 볼 필요가 있었다. 내가 HTML에 비교적 익숙하다고 말할 수 있습니까? 아! 나는 너의 명예를 위해 1000 마리의 염소를 희생시켜야한다. – user3813799

@ user3813799 롤 오케이 또는 올바른 대답으로 표시 할 수 있습니다 .... – VikingBlooded

. 나는이 작품 것으로 나타났습니다 :

<div style="display: table; height: 400px; overflow: hidden;"> 
<div style="display: table-cell; vertical-align: middle;"> 
    <div> 
    everything is vertically centered in modern IE8+ and others. 
    </div> 
</div> 
</div>

가 JSfiddle 더 사용하는 것 this previously asked question.

출처

2014-07-07 20:09:27 BigCheesy

또는 아래를보십시오 .... – VikingBlooded

나는 이미 당신을 보았습니다. 미안 해요 – BigCheesy

No biggy Mr Cheesy! – VikingBlooded

텍스트 Div를 사용하여 문제 정렬

답변

관련 문제