div 내에서 텍스트 수직 정렬

div 내에서 텍스트 수직 정렬

이 질문에는 이미 다음과 같은 답이 있습니다.

div에서 텍스트를 수직으로 정렬하려면 어떻게 해야 합니까? (34개 답변)

마감됨9년 전에.

아래 코드(JS Fiddle에서 데모로도 사용 가능)는 이상적으로는 원하는 대로 텍스트를 가운데에 배치하지 않습니다.텍스트를 수직으로 중앙에 배치할 수 있는 방법을 찾을 수 없습니다.div을 사용하는 경우에도margin-top기여하다.어떻게 해야 하나요?

<div id="column-content">
    <img src="http://i.stack.imgur.com/12qzO.png">
    <strong>1234</strong>
    yet another text content that should be centered vertically
</div>

#column-content {
    display: inline-block;
    border: 1px solid red;
    position:relative;
}
    
#column-content strong {
    color: #592102;
    font-size: 18px;
}

img {
    margin-top:-7px;
    vertical-align: middle;        
}

안드레스 일리치가 옳아요누군가가 그의 의견을 놓칠 경우를 대비해서...

A.) 텍스트가 한 줄만 있는 경우:

div
{
  height: 200px;
  line-height: 200px; /* <-- this is what you must define */
}

<div>vertically centered text</div>

B.) 여러 줄의 텍스트가 있는 경우:

div
{
  height: 200px;
  line-height: 200px;
}

span
{
  display: inline-block;
  vertical-align: middle;
  line-height: 18px; /* <-- adjust this */
}

<div><span>vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text</span></div>

텍스트 내용에 대한 컨테이너를 만듭니다.span아마

#column-content {
  display: inline-block;
}
img {
  vertical-align: middle;
}
span {
  display: inline-block;
  vertical-align: middle;
}

/* for visual purposes */
#column-content {
  border: 1px solid red;
  position: relative;
}

<div id="column-content">

  <img src="http://i.imgur.com/WxW4B.png">
  <span><strong>1234</strong>
    yet another text content that should be centered vertically</span>
</div>

제이에스아이들

2016년 4월 10일 업데이트

이제 Flexbox를 사용하여 항목을 수직으로(또는 수평으로) 정렬해야 합니다.

body {
    height: 150px;
    border: 5px solid cyan; 
    font-size: 50px;
    
    display: flex;
    align-items: center; /* Vertical center alignment */
    justify-content: center; /* Horizontal center alignment */
}

Middle

플렉스박스에 대한 좋은 가이드는 CSS 트릭에서 읽을 수 있습니다.그것을 지적해 준 벤에게 감사합니다.업데이트할 시간이 없었습니다.

---

마헨드라는 좋은 사람이 여기에 매우 효과적인 해결책을 올렸습니다.

다음 클래스는 요소를 부모의 수평 및 수직 중심으로 만들어야 합니다.

.absolute-center {

    /* Internet Explorer 10 */
    display: -ms-flexbox;
    -ms-flex-pack: center;
    -ms-flex-align: center;

    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;

    /* Safari, Opera, and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
}

다중 줄 텍스트에 대해 허용된 답변이 작동하지 않습니다.

여기서 설명하는 대로 CSS 다중 줄 텍스트 수직 정렬을 표시하도록 JSidle을 업데이트했습니다.

#column-content {
  border: 1px solid red;
  height: 200px;
  width: 100px;
}

div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

<div id="column-content">
  <div>yet another text content that should be centered vertically</div>
</div>

이 기능은 다음과 함께 작동합니다.<br />"또 다른...."

사용해 보십시오.

HTML

<div><span>Text</span></div>

CSS

div {
    height: 100px;
}

span {
    height: 100px;
    display: table-cell;
    vertical-align: middle;
}

Omar(또는 Mahendra)의 솔루션을 더욱 보편화하려면 Firefox와 관련된 코드 블록을 다음으로 대체해야 합니다.

/* Firefox */
display: flex;
justify-content: center;
align-items: center;

작동하지 않는 경우 오마르 코드의 문제는 상자를 화면 또는 그 바로 옆의 조상 중앙에 배치하려는 경우에 발생합니다.이 센터링은 위치를 다음으로 설정하여 수행합니다.

position: relative;또는position:static;(위치가 절대 또는 고정되지 않음).

그런 다음 여백: auto; 또는 여백-우측: auto; 여백-좌측: auto;

이러한 박스 센터 정렬 환경에서 Omar의 제안은 효과가 없습니다.Internet Explorer 8(시장 점유율 7.7%)에서도 작동하지 않습니다.따라서 Internet Explorer 8(및 기타 브라우저)의 경우 위의 다른 솔루션에서 볼 수 있는 해결 방법을 고려해야 합니다.

이것은 단순히 효과가 있어야 합니다.

#column-content {
        --------
    margin-top: auto;
    margin-bottom: auto;
}

당신의 데모에서 시도해 봤습니다.

CSS 콘텐츠에 수직 정렬 추가#column-content strong역시:

#column-content strong {
    ...
    vertical-align: middle;
}

업데이트된 예제도 참조하십시오.

업데이트 ===

다른 텍스트 주위에 스팬을 두고 다른 수직 정렬을 사용합니다.

HTML:

... <span>yet another text content that should be centered vertically</span> ...

CSS:

#column-content span {
    vertical-align: middle;
}

다음 예제도 참조하십시오.

여러 줄이 필요한 경우 이 방법이 가장 간단합니다. »span'd 텍스트를 다른 텍스트span를 높를지 니합다정으로 합니다.line-height여러 라인에 대한 트릭은 내부를 재설정하는 것입니다.span의line-height.

<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>

.textvalignmiddle {
    line-height: /* Set height */;
}

.textvalignmiddle > span {
    display: inline-block;
    vertical-align: middle;
    line-height: 1em; /* Set line height back to normal */
}

데모

겉모습은.span가능성이 있습니다div아니면 당신은 무엇을 가지고 있습니까.

테이블을 만들지 않을 때 테이블을 사용해서는 안 된다는 것을 알지만, 다음과 같습니다.

테이블 셀은 여러 줄의 텍스트를 세로로 가운데 정렬할 수 있으며 기본적으로 이 작업을 수행할 수도 마찬가지입니다.따라서 잘 작동하는 솔루션은 다음과 같은 것이 될 수 있습니다.

HTML:

<div class="box">
  <table class="textalignmiddle">
    <tr>
      <td>lorem ipsum ...</td>
    </tr>
  </table>
</div>

CSS (테이블 항목을 항상 박스 div에 맞게 설정):

.box {
  /* For example */
  height: 300px;
}

.textalignmiddle {
  width: 100%;
  height: 100%;
}

다음을 참조하십시오. http://www.cssdesk.com/LzpeV

언급URL : https://stackoverflow.com/questions/9249359/vertically-align-text-within-a-div