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>

최신 브라우저에서 올바른 방법은 Flexbox를 사용하는 것입니다.

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

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

---

CSS의 수직 중심화
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

기사 요약:

CSS 2를 사용할 수 .display:table/display:table-cell중앙 콘텐츠로 이동합니다.

샘플은 JSFidle에서도 확인할 수 있습니다.

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>

6할 수 .#최신 브라우저에서 스타일을 숨기려면:

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를 사용하여 보다 쉽게 중심을 잡을 수 있는 방법이 있습니다.Internet Explorer 9 이하에서는 Flexbox가 지원되지 않습니다.

다음은 몇 가지 훌륭한 리소스입니다.

• Flexbox 안내서
• Flexbox를 사용한 요소 중심 맞추기
• Flexbox용 Internet Explorer 10 구문
• Flexbox 지원

브라우저 접두사가 있는 JSFidle

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>

다른 해결책

이것은 0.6.3에서 나온 것이며 CSS의 6줄로 모든 것을 중앙에 배치할 수 있습니다.

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

jfiddle

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>

기답

표시된 답변의 링크가 약간 구식인 것처럼 유용한 간단한 교차 브라우저 접근 방식입니다.

자바스크립트 또는 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에서 작동하도록 만든 것을 제거함)을 사용했습니다.다른 사람에게 도움이 될지도...

제이에스아이들

.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%);
}

은 나의 텍트를배다니합치에 을 잡습니다.div 의 바깥쪽 div접두사(예: 예브라우저두할수있습다니도야사)를 사용해야 할 수도 .-webkit-사용자의 브라우저에서 이 작업을 수행할 수 있습니다.

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

이것을 시도하고, 상위 div에 추가합니다.

display: flex;
align-items: center;

를 '하고 '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-caption", "table-cell", "table-column", "table-column-group", "table-row-group" 및 "inherit" 값은 Internet Explorer 7 이전 버전에서 지원되지 않습니다.Internet Explorer 8을 사용하려면!DOCTYPE이 필요합니다.Internet Explorer 9은 값을 지원합니다.

다음 표에는 http://www.w3schools.com/cssref/pr_class_display.asp 에서 허용되는 표시 값도 나와 있습니다.

는 더 이상 6-8이 저는 CSS를 입니다.display: table호에 (또는 에또대해문는제이또▁(대해▁for)▁(는▁thisdisplay: flex).

표:

.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; 
    align-items: center; 
    height: 150px;
    justify-content: center; /* optional */
    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>

Flexbox는 parent div 내부의 여러 요소를 수평 및 수직으로 중앙에 배치하여 완벽하게 작동했습니다.

아래 코드는 parent-div 내부의 모든 요소를 수평 및 수직으로 중앙에 배치합니다.child-div를 사용하여 두 앵커 요소를 동일한 라인(행)에 유지했습니다.child-div를 사용하지 않으면 세 요소(앵커, 앵커 및 단락)가 parent-div의 열 안에 서로 겹쳐집니다.여기서 child-div만 parent-div 열 안에 쌓입니다.

.parent-div {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: pink;
}

<div class="parent-div">
  <div class="child-div">
    <a class="footer-link" href="https://www.github.com/">GitHub</a>
    <a class="footer-link" href="https://www.facebook.com/">Facebook</a>
    <p class="footer-copywrite">© 2019 Lorem Ipsum.</p>
  </div>
</div>

화면표시 그리드 및 장소 항목 중심을 사용할 수 있습니다.

.container {
  width: 200px;
  height: 200px;
  border: solid red;
  display: grid;
  place-items: center;
}

<div class="container">
  Lorem, ipsum dolor.
</div>

다음은 텍스트 한 줄에 가장 적합한 솔루션입니다.

또한 줄 수가 알려진 경우 일부 조정을 통해 다중 줄 텍스트에서도 작동할 수 있습니다.

.testimonialText {
    font-size: 1em; /* Set a font size */
}
.testimonialText:before { /* Add a pseudo element */
    content: "";
    display: block;
    height: 50%;
    margin-top: -0.5em; /* Half of the font size */
}

여기에 JS 미들이 있습니다.

<!DOCTYPE html>
<html>

  <head>
    <style>
      .container {
        height: 250px;
        background: #f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>

</html>

매우 간단한 솔루션으로 프로젝트에 여러 번 사용했습니다.

소스 코드

.welcome_box{
    height: 300px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    border: solid 1px #dadada;
}

<div class="welcome_box">Hello Friends</div>

출력:

이 질문을 해주셔서 감사합니다.공유하게 되어 기쁩니다.

Flexbox를 사용하여 div 내부에서 중심 텍스트를 수직으로 정렬할 수 있습니다.

<div>
   <p class="testimonialText">This is the testimonial text.</p>
</div>

div {
   display: flex;
   align-items: center;
}

자세한 내용은 Flexbox 전체 가이드에서 확인할 수 있습니다.

다음과 같은 간단한 솔루션을 확인하십시오.

HTML

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

CSS

.block-title {
    float: left;
    display: block;
    width: 100%;
    height: 88px
}

.block-title h3 {
    display: table-cell;
    vertical-align: middle;
    height: inherit
}

제이에스아이들

테이블/테이블 셀에 의존하지 않고 컨텐츠를 수직으로 정렬할 수 있는 더 간단한 방법이 있습니다.

http://jsfiddle.net/bBW5w/1/

그 안에 용기의 전체 높이를 가정하는 보이지 않는 (폭=0) div를 추가했습니다.

Internet Explorer 및 Firefox(최신 버전)에서 작동하는 것 같습니다.다른 브라우저에서 확인하지 않았습니다.

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

그리고 물론 CSS:

.t, .t > div:first-child
{
    border: 1px solid green;
}
.t
{
    height: 400px;
}
.t > div
{
    display: inline-block;
    vertical-align: middle
}
.t > div:last-child
{
    height: 100%;
}

가 찾은 중 깨끗한 9이며 " by 5 픽셀"에 대한 합니다. 그리고 다음을 사용하여 "오프 바이 .5 픽셀" 문제에 대한 해결책을 추가합니다.transform-style다른 답변이 누락되었습니다.

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

출처: CSS 3줄로 모든 것을 세로로 정렬합니다.

HTML:

<div class="col-md-2 ml-2 align-middle">
    <label for="option2" id="time-label">Time</label>
</div>

CSS:

.align-middle {
    margin-top: auto;
    margin-bottom: auto;
}

값을 모르는 요소에 대한 간단한 해결책:

HTML

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

CSS

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

Adam Tomat의 답변에 따르면 div의 텍스트를 정렬하기 위해 JS 미들 예제가 준비되었습니다.

<div class="cells-block">    
    text<br/>in the block   
</div>

디스플레이를 사용하여:CSS에서 플렉스:

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* Vertically   */
    justify-content: flex-end; /* Horisontally */
    text-align: right;         /* Addition: for text's lines */
}

블로그 게시물에 있는 다른 예와 몇 가지 설명과 함께.

그리드 항목에 자동 여백을 지정합니다.

Flexbox와 마찬가지로 그리드 항목에 마진 자동을 적용하면 두 축 모두에 마진이 중앙에 배치됩니다.

.container {
  display: grid;
}
.element {
  margin: auto;
}

사용:

h1 {
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.container {
    height: 200px;
    width: 500px;
    position: relative;
    border: 1px solid #eee;
}

<div class="container">
    <h1>Vertical align text</h1>
</div>

이 트릭을 사용하면 중앙에 "left:0"을 추가하여 왼쪽에 정렬하지 않으려면 모든 항목을 정렬할 수 있습니다.

CSS 그리드를 사용하면 다음과 같은 이점을 얻을 수 있습니다.

.outer {
    background-color: grey;
    width: 10rem;
    height: 10rem;
    display: grid;
    justify-items: center;
}

.inner {
    background-color: #FF8585;
    align-self: center;
}

<div class='outer'>
    <div class='inner'>
       Content
    </div>
</div>

HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

 .relative {
     position: relative;
 }
 .absolute {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.5);
 }
 .table {
     display: table;
     height: 100%;
     width: 100%;
     text-align: center;
     color: #fff;
 }
 .table-cell {
     display: table-cell;
     vertical-align: middle;
 }

플렉스를 사용하면 브라우저 렌더링 차이에 주의해야 합니다.

이것은 Chrome과 Internet Explorer 모두에서 잘 작동합니다.

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #fcc;
}

<div class="outer"><div class="inner">Active Tasks</div></div>

Chrome에서만 작동하는 이 제품과 비교해 보십시오.

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    background-color: #fcc;
}

<div class="outer">
<div class="inner"><span style=" margin: auto;">Active Tasks</span></div>
</div>

이렇게 하면 텍스트가 세로로 중앙에 배치됩니다.

.parent {
  display: inline-flex
}

.testimonialText {
  margin-top: auto;
  margin-bottom: auto;
}

<div class="parent">
  <div class="testimonialText">
    Hello World
  </div>
</div>

은 이은다또다변다니형입의 또 다른 입니다.div순식간에div사용하여 패턴 만들기calc()CSS »

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

이것은 다음과 같은 이유로 작동합니다.

• position:absolute▁placement▁the▁of▁for의 정확한 위치를 .div에.div
• 우리는 내부의 높이를 알고 있습니다.div가 로설했 때문에기정으로 에.20px.
• calc(50% - 10px)50% - 내부 중심 맞추기용 높이의 절반div

이것은 잘 작동합니다.

HTML

<div class="information">
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>
</div>

사스

.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}

이미지 태그 미포함 및 포함<mat-icon>(글꼴).

CSS를 사용할 수 있습니다.flexbox.

.testimonialText {
  height: 500px;
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b4d2d2;
}

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

흠, 이것을 해결할 수 있는 방법은 분명히 많이 있습니다.

하지만 나는.<div>그것은 절대적으로 위치해 있습니다.height:100%(계속,top:0;bottom:0고정 폭) 및display:table-cell텍스트의 중심을 수직으로 맞추지 못했습니다.내 솔루션에는 내부 스팬 요소가 필요했지만, 다른 많은 솔루션도 마찬가지이므로 다음과 같이 추가하는 것이 좋습니다.

나의 컨테이너는.label숫자를 세로로 가운데로 맞춰주세요.저는 그것을 절대적으로 위치시킴으로써 했습니다.top:50%및 설정line-height:0

<div class="label"><span>1.</span></div>

그리고 CSS는 다음과 같습니다.

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

실제로 보기: http://jsfiddle.net/jcward/7gMLx/

언급URL : https://stackoverflow.com/questions/2939914/how-do-i-vertically-align-text-in-a-div