html - 정렬 - div 블록 안에있는 CSS 중심 텍스트(가로 및 세로)




li 가로 정렬 (16)

divdisplay:block 하도록 설정된 display:block . ( 90px heightwidth ) 안에 텍스트가 있습니다.

텍스트가 세로 및 가로 모두 중앙에 정렬되어야합니다.

나는 text-align:center 시도했지만 vertical-align:middle 을하지 않았기 때문에 vertical-align:middle 시도했지만 작동하지 않았다.

어떤 아이디어?


2014 년 현재의 일반적인 기술 :

  • 접근법 1 - transform translateX / translateY :

    / 전체 화면 예

    지원되는 브라우저 (대부분)에서 top: 50% / left: 50% translateX(-50%) translateY(-50%) 와 조합하여 left: 50% 를 사용하여 요소를 동적으로 세로 / 가로로 가운데에 맞 translateX(-50%) translateY(-50%) .

    .container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    
  • 접근법 2 - Flexbox 방법 :

    / 전체 화면 예

    지원되는 브라우저 에서 대상 요소의 displayflex 하고 align-items: center 하여 세로 align-items: center 하고 justify-content: center 하여 가로 justify-content: center align-items: center . 추가 브라우저 지원을 위해 공급 업체 접두어를 추가하는 것을 잊지 마십시오 ( 예 참조 ).

    html, body, .container {
        height: 100%;
    }
    .container {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
  • 접근법 3 - table-cell / vertical-align: middle :

    / 전체 화면 예

    어떤 경우에는 html / body 요소의 높이를 100% 로 설정해야합니다.

    수직 맞춤의 경우 상위 요소의 width / height100% 하고 display: table 추가 display: table . 그런 다음 하위 요소에 대해 displaytable-cell 로 변경하고 vertical-align: middle 추가하십시오.

    수평 중심 text-align: center 를 추가하여 텍스트와 다른 inline 하위 요소를 중앙에 배치 할 수 있습니다. 또는 요소가 block 레벨이라고 가정하면 margin: 0 auto 사용할 수 있습니다.

    html, body {
        height: 100%;
    }
    .parent {
        width: 100%;
        height: 100%;
        display: table;
        text-align: center;
    }
    .parent > .child {
        display: table-cell;
        vertical-align: middle;
    }
    
  • 접근법 4 - 변위가있는 상단에서 절대적으로 50% 위치 :

    / 전체 화면 예

    이 방법은 텍스트의 높이를 알고 있다고 가정합니다 (이 경우 18px . 부모 요소에 상대적으로 위쪽에서 요소를 절대적으로 50% 배치하십시오. 요소의 알려진 높이의 절반 인 음의 margin-top 값을 사용하십시오.이 경우 -9px 입니다.

    html, body, .container {
        height: 100%;
    }
    .container {
        position: relative;
        text-align: center;
    }
    .container > p {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        margin-top: -9px;
    }
    
  • 접근법 5 - line-height 방법 (최소 유연성 - 제안되지 않음) :

    여기에 예제가있다.

    경우에 따라 상위 요소의 높이가 고정되어있을 수 있습니다. 수직 센터링의 경우, 자식 요소의 line-height 값을 부모 요소의 고정 높이와 같게 설정하면 line-height .

    이 솔루션은 경우에 따라 작동하지만 여러 줄의 텍스트가있는 경우에는 작동하지 않습니다.

    .parent {
        height: 200px;
        width: 400px;
        text-align: center;
    }
    .parent > .child {
        line-height: 200px;
    }
    

방법 4와 5는 가장 신뢰할만한 방법은 아닙니다. 처음 3 개 중 하나를 선택하십시오.


접근법 1

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

접근법 2

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

접근법 3

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>


가장 좋은 방법 중 하나는 부모 div에서 flex 속성을 사용하고 여백을 추가하는 것입니다 : 요소 태그에 자동 속성

.parent{
    display: flex;
    flex-direction: column;
    flex: 1;
    height:100%;
}

p{
    margin:auto;
}

나는 콘테이너에 항상 다음과 같은 CSS를 사용한다.

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

여기에 행동을 참조하십시오 : https://jsfiddle.net/yp1gusn7/


다음 예제를 시도하십시오. 각 카테고리에 대한 예제를 추가했습니다 : 가로 및 세로

<!DOCTYPE html>
<html>
    <head>
        <style>
            #horizontal
            {
                text-align: center;
            }
            #vertical
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
         </style>
    </head>
    <body>
         <div id ="horizontal">Center horizontal text</div>
         <div id ="vertical">Center vertical text</div>
    </body>
</html> 

당신은 이것을 위해 매우 쉬운 코드를 시도 할 수있다.

  display:flex;
  align-items: center;
  justify-content:center;

.box{
  height:90px;
  width:90px;
  background:green;
  display:flex;
  align-items: center;
  justify-content:center;
}
<div class="box">
  Lorem 
</div>

codpen link http://codepen.io/santoshkhalse/pen/xRmZwr


세로 정렬을 위해 선 높이를 조정합니다.

line-height: 90px;

스타일 적용 :

position: absolute;
top: 50%;
left: 0;
right: 0;

텍스트는 길이에 관계없이 가운데에 배치됩니다.


이것은 나를 위해 일했다.

.center-stuff{  
      text-align: center;
      vertical-align: middle;
      line-height: 230px;/*This should be the div height*/
    }

이것은 나를 위해 작동합니다 (ok 테스트되었습니다!)

html :

<div class="mydiv">
    <p>Item to be Centered!</p>
</div>

CSS :

.mydiv {
    height: 100%; /* or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* to compensate own width and height */
}

다른 값을 선택한 다음 50 % fi를 선택할 수 있습니다. 부모의 25 %를 중심으로 25 %


텍스트 및 / 또는 이미지의 한 줄이면 쉽게 할 수 있습니다. 그냥 사용하십시오.

text-align: center;
vertical-align: middle;
line-height: 90px;       /* the same as your div height */

그게 다야. 여러 줄이 될 수 있다면 다소 복잡합니다. 그러나 http://pmob.co.uk/ 에 해결책이 있습니다. "수직 정렬"을 찾으십시오.

그들은 해킹되거나 복잡한 div를 추가하는 경향이 있기 때문에 ... 보통 한 셀을 사용하는 테이블을 사용하여 최대한 간단하게 만듭니다.

2016 / 2017에 대한 업데이트 :

transform 통해 더 일반적으로 수행 할 수 있으며 IE10 및 IE11과 같은 구형 브라우저에서도 잘 작동합니다. 여러 줄의 텍스트를 지원할 수 있습니다.

position: relative;
top: 50%;
transform: translateY(-50%); 

예 : https://jsfiddle.net/wb8u02kL/1/

폭을 줄이려면 :

위의 솔루션은 콘텐츠 영역에 대해 고정 폭을 사용했습니다. shrink wrap width를 사용하려면 다음을 사용하십시오.

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

예 : https://jsfiddle.net/wb8u02kL/2/

Flexbox를 사용해 보았지만, IE10과 같은 IE의 구형 버전에서 깨지기 때문에 널리 지원되지 않았습니다.


.cell-row {display: table; width: 100%; height: 100px; background-color: lightgrey; text-align: center}
.cell {display: table-cell}
.cell-middle {vertical-align: middle}
<div class="cell-row">
  <div class="cell cell-middle">Center</div>
</div>


#parent
{
  display:table;
}
#child
{
  display:table-cell;
  width:100%; //as large as its parent to center the text horizontally
  text-align: center;
  vertical-align:middle;//vertically align this element on its parent
}

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style ="text-align: center;">Center horizontal text</div>
        <div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
    </body>
</html> 

<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv{
        height:450px;
        background:#f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p{
        font-size:24px;}
    </style>
  </head>
  <body>
    <div class="maindiv">
      <h1>Title</h1>

    </div>
  </body>
</html>

<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>




css