[html] div에서 텍스트를 세로로 정렬하려면 어떻게합니까?

Html / 글쓴이

텍스트를 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>

스 니펫 확장

답변

line-height속성 을 추가 해야하며 해당 속성은의 높이와 일치해야합니다 div. 귀하의 경우 :

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}
<div class="center">
  A single line.
</div>

스 니펫 확장

실제로 height속성을 완전히 제거 할 수 있습니다.

이것은 한 줄의 텍스트 에서만 작동 하므로주의하십시오.

답변

여기 훌륭한 자료가 있습니다

에서 http://howtocenterincss.com/ :

CSS의 중심은 엉덩이에 고통입니다. 다양한 요인에 따라 그것을 수행하는 방법이있는 것 같습니다. 이를 통합하여 각 상황에 필요한 코드를 제공합니다.

Flexbox 사용

이 게시물을 최신 기술로 최신 상태로 유지하면서 Flexbox를 사용하여 무언가를 중앙에 배치하는 훨씬 쉬운 방법이 있습니다. Flexbox는 Internet Explorer 9 이하 에서 지원되지 않습니다 .

다음은 훌륭한 자료입니다.

브라우저 프리픽스가있는 JSFiddle

li {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  /* Column | row */
}
<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

스 니펫 확장

다른 해결책

이것은 zerosixthree 에서 왔으며 6 줄의 CSS로 무엇이든 중앙에 놓을 수 있습니다.

이 방법은 Internet Explorer 8 이하 에서 지원되지 않습니다 .

jsfiddle

p {
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

스 니펫 확장

이전 답변

표시된 답변의 링크가 약간 구식 인 경우 유용한 단순하고 브라우저 간 접근 방식입니다.

JavaScript 또는 CSS 행 높이에 의존하지 않고 정렬되지 않은 목록과 div에서 텍스트를 세로 및 가로로 가운데 맞추는 방법 . 얼마나 많은 텍스트를 가지고 있더라도 특정 목록이나 div에 특수 클래스를 적용 할 필요가 없습니다 (코드는 동일합니다). Internet Explorer 9, Internet Explorer 8, Internet Explorer 7, Internet Explorer 6, Firefox, Chrome, Opera 및 Safari를 포함한 모든 주요 브라우저에서 작동합니다 . 최신 브라우저에는없는 CSS 제한으로 인해 두 가지 특수 스타일 시트 (Internet Explorer 7 용과 Internet Explorer 6 용)가 있습니다.

Andy Howard-순서가없는 목록 또는 div에서 텍스트를 가로 및 세로로 가운데 맞추는 방법

필자가 작업 한 마지막 프로젝트에서 Internet Explorer 7/6에 대해 크게 신경 쓰지 않았으므로 약간 벗겨진 버전을 사용했습니다 (예 : Internet Explorer 7 및 6에서 작동하게 만든 항목 제거). 다른 사람에게 유용 할 수 있습니다 …

JSFiddle

.outerContainer {
  display: table;
  width: 100px;
  /* Width of parent */
  height: 100px;
  /* Height of parent */
  overflow: hidden;
}

.outerContainer .innerContainer {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

li {
  background: #ddd;
  width: 100px;
  height: 100px;
}
<ul>
  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>

  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>
</ul>

스 니펫 확장

답변

로 쉽습니다 display: flex. 다음 방법을 사용하면의 텍스트가 div세로 중앙에 배치됩니다.

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}
<div>
  Your text here.
</div>

스 니펫 확장

그리고 원하는 경우 가로 :

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}
<div>
  Your text here.
</div>

스 니펫 확장

필요한 브라우저 버전이 표시되어야합니다. 이전 버전에서는 코드가 작동하지 않습니다.

답변

다음을 사용하여 임의의 요소를 쉽게 세로로 가운데에 맞 춥니 다.

HTML :

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS :

#mytext {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

이것은 내 텍스트를 div200px 높이의 바깥 쪽의 정확한 세로 가운데에 맞 춥니 다 div. 브라우저 -webkit-에서이 작업을 수행하려면 브라우저 접두사 ( 내 경우 와 같이)를 사용해야 할 수도 있습니다 .

이것은 텍스트뿐만 아니라 다른 요소에도 적용됩니다.

답변

디스플레이를 ‘table-cell’로 설정하고 다음을 적용하면됩니다 vertical-align: middle;.

    {
        display: table-cell;
        vertical-align: middle;
    }

그러나 이것은 http://www.w3schools.com/cssref/pr_class_display.asp 에서 복사 한이 발췌에 따라 Internet Explorer의 모든 버전에서 지원되는 것은 아닙니다 .

참고 : 값 “inline-table”, “table”, “table-caption”, “table-cell”, “table-column”, “table-column-group”, “table-row”, “table-row Internet Explorer 7 및 이전 버전에서는 -group “및”inherit “가 지원되지 않습니다. Internet Explorer 8에는! DOCTYPE이 필요합니다. Internet Explorer 9은 값을 지원합니다.

다음 표는 http://www.w3schools.com/cssref/pr_class_display.asp 에서도 허용되는 표시 값을 보여줍니다 .

여기에 이미지 설명을 입력하십시오

답변

요즘 (더 이상 Internet Explorer 6-7-8이 필요하지 않습니다 .) display: table이 문제 (또는 display: flex)에 CSS 를 사용하려고 합니다.

이전 브라우저의 경우 :

표: 

.vcenter {
    display: table;
    background: #eee; /* optional */
    width: 150px;
    height: 150px;
    text-align: center; /* optional */
}

.vcenter > :first-child {
    display: table-cell;
    vertical-align: middle;
}
<div class="vcenter">
  <p>This is my Text</p>
</div>

스 니펫 확장

굽힘: 

.vcenter {
    display: flex; /* <-- Here */
    align-items: center; /* <-- Here */
    justify-content: center; /* optional */
    height: 150px; /* <-- Here */
    background: #eee;  /* optional */
    width: 150px;
}
<div class="vcenter">
  <p>This is my text</p>
</div>

스 니펫 확장

이것은 (실제로)이 문제에 대해 가장 좋아하는 솔루션입니다 (간단하고 잘 지원되는 브라우저).

div {
    margin: 5px;
    text-align: center;
    display: inline-block;
}

.vcenter {
    background: #eee;  /* optional */
    width: 150px;
    height: 150px;
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}

.vcenter > :first-child {
    display: inline-block;
    vertical-align: middle;
    max-width: 99.999%;
}
<div class="vcenter">
  <p>This is my text</p>
</div>
<div class="vcenter">
  <h4>This is my Text<br/>Text<br/>Text</h4>
</div>
<div class="vcenter">
  <div>
   <p>This is my</p>
   <p>Text</p>
  </div>
</div>

스 니펫 확장