div에서 텍스트를 세로로 정렬하는 방법

 

질문 : div에서 텍스트를 세로로 정렬하려면 어떻게합니까?

---

div와 텍스트를 정렬하는 가장 효과적인 방법을 찾으려고합니다. 몇 가지 시도했지만 작동하지 않는 것 같습니다.

 

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

답변

---

자세한 내용은 이 답변 을 참조하십시오.

이전 브라우저에서 작동하는 몇 가지 이전 방법은 아래를 참조하세요.

CSS의 세로 중심
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

기사 요약 :

CSS 2 브라우저의 경우 display:table / display:table-cell 을 사용하여 콘텐츠를 중앙에 배치 할 수 있습니다.

JSFiddle 에서도 샘플을 사용할 수 있습니다.

div { border:1px solid green;}

<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>

최신 브라우저에서 스타일을 숨기려면 # 을 사용하여 이전 브라우저 (Internet Explorer 6/7)의 해킹을 스타일로 병합 할 수 있습니다.

 

div { border:1px solid green;}

<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
      everything is vertically centered
    </div>
  </div>
</div>

출처 : https://stackoverflow.com/questions/2939914/how-do-i-vertically-align-text-in-a-div