div의 텍스트를 세로로 가운데에 맞출 수 없음

Question

두 텍스트 태그를 텍스트 영역 필드 옆에 가져오고 해당 텍스트 영역 필드의 가운데에 세로로 정렬하려고합니다.

나는

How to Vertically Align Elements in HTML

및

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

하지만 아무 소용

일을 시도했습니다.

나는 모두 시도의 코드 게시합니다 -

시도 1 -

, HTML

<div class="optionGroup"> 
    <div class="response"> 
     <div class="outer"> 
      <div class="middle"> 
       <div class="inner"> 
        <textarea class="correctResponse"></textarea> 
        <text class="closeButton centerVertically">&#10006;</text> 
        <text class="addButton centerVertically">&#43;</text> 
       </div> 
      </div> 
     </div> 

을 CSS-

.outer{ 
    display:table; 
    position:static; 
} 

.middle{ 
    display:table-cell; 
    vertical-align:middle; 
    width:100%; 
} 

시도 2 ​​

H TML-

는

<textarea class="correctResponse"></textarea> 
<text class="closeButton centerVertically">&#10006;</text> 
<text class="addButton centerVertically">&#43;</text> 

CSS-

.centerVertically{ 
    line-height:100%; 
    vertical-align:middle; 
} 

어디서 잘못된 것입니까? 두 텍스트 태그가 텍스트 영역 옆에오고 텍스트 영역의 위쪽에서 수직으로 중간에 있도록하려면 어떻게해야합니까?

감사합니다.

Answer 1

텍스트 영역에 텍스트가 아닌 텍스트에 vertical-align:middle을 적용하면 텍스트 요소가 서로 가운데에 배치되지만 텍스트 영역과 함께 삽입되는 전체 선에 상대적이지 않게됩니다. 당신은 또한 텍스트 영역을 중심 있다면 그것은과 같이 작동한다 :

, HTML

<textarea class="correctResponse centerVertically"></textarea> 
<text class="closeButton centerVertically">&#10006;</text> 
<text class="addButton centerVertically">&#43;</text>​​​​​​​​ 

CSS-

.centerVertically{ 
    line-height:100%; 
    vertical-align:middle; 
}​ 

Answer 2

이 시도 :

<style> 
.centerVertically{ 
    height:100%; 
    /*vertical-align:middle;*/ 
margin: 50% 0 50% 0; 

position: absolute; 
} 
</style> 


<div class="centerVertically"> 
<textarea class="correctResponse"></textarea> 
<text class="closeButton">&#10006;</text> 
<text class="addButton">&#43;</text> 
</div>