html - 정렬 - 텍스트 박스 중앙




CSS로 텍스트를 세로로 가운데 맞추는 방법은 무엇입니까? (20)

CSS3에서 소개 된 Flexboxes가 해결책입니다.

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 3px solid orange;
    background-color: gold;
}

p {
    margin: auto; /* Important */
    text-align: center;
    font-family: Calibri;
    background-color: yellow;
    border-radius: 20px;
    padding: 15px;
}
<section>
    <p>
        I'm centered!<br/>
        Flexboxes are great!
    </p>
</section>

참고 : 텍스트를 가운데에 놓으려면 위에 표시된 행을 중요 행으로 바꿉니다.

1) 수직으로 만 :

margin: auto 0;

2) 수평 적으로 만 :

margin: 0 auto;

업데이트 : 내가 알아 차 렸지만,이 트릭은 그리드 (디스플레이 : 그리드)와 함께 작동합니다.

텍스트가 포함 된 div 요소가 있는데이 div의 내용을 세로 가운데에 정렬하고 싶습니다.

여기 내 div 스타일입니다 :

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
<div id="box">
  Lorem ipsum dolor sit
</div>

이 작업을 수행하는 가장 좋은 방법은 무엇입니까?


transform 속성을 사용해보십시오.

 #box {
  height: 90px;
  width: 270px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 <div Id="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>


나는 이전 답변을 보았고 화면의 너비에만 반응했습니다 (응답하지 않음). 반응이 좋으면 flex를 사용해야합니다.

예:

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

다음 CSS 코드를 추가하면됩니다.

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

이는 결국 CSS가 다음과 같이 보임을 의미합니다.

#box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
}
<div id="box">
  Some text
</div>


다음 코드는 화면 크기 또는 div 크기에 관계없이 div 를 화면 중간에 배치합니다.

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

flex 에 대한 자세한 내용은 here 참조 here .


다음 코드를 시도해보십시오.

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

div {
  height: 80%;
  width: 100%;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  background: #4CAF50;
  color: #fff;
  font-size: 50px;
  font-style: italic;
}
<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>


더 새로운 브라우저는 이제 CSS calc 기능을 지원합니다. 이러한 브라우저를 타겟팅하는 경우 다음과 같은 작업을 수행 할 수 있습니다.

<div style="position: relative; width: 400px; height: 400px; background-color: red">
  <span style="position: absolute; line-height: 40px; height: 80px; text-align: center; width: 300px; overflow: hidden; top: calc(50% - 40px); left: calc(50% - 150px);">
    Here are two lines that will be centered even if the parent div changes size.
  </span>
</div>

핵심은 style = "top: calc(50% - [innerFixedHeightInPX/2]px); height: [innerFixedHeightInPX]px;" 상대적으로 위치하는 부모 div 내부.


또 다른 방법 (아직 여기에 언급되지 않음)은 Flexbox 입니다.

컨테이너 요소에 다음 코드를 추가하기 만하면됩니다.

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

Flexbox 데모 1

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}
<div class="box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>

또는 컨테이너 를 통해 내용을 정렬하는 대신 flexbox는 플렉스 컨테이너에 하나의 플렉스 항목이있는 경우 (위 질문에 주어진 예제와 같이) 플렉스 항목자동 여백으로 가운데에 맞출 수 있습니다.

따라서 플렉스 아이템을 수평 및 수직 가운데에 센터링하려면 margin:auto 설정하면됩니다 margin:auto

Flexbox 데모 2

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
}
.box span {
  margin: auto;
}
<div class="box">
  <span>margin:auto on a flex item centers it both horizontally and vertically</span> 
</div>

주의 : 위의 모든 사항은 수평 배치로 배치하는 동안 물품을 센터링하는 데 적용됩니다. 기본적으로 flex-direction 의 값은 row 이기 때문에 이는 기본 동작이기도합니다. 그러나 플렉스 항목을 세로 열에 배치해야하는 경우 flex-direction: column 을 컨테이너에 설정하여 주축을 세로 형으로 설정하고 추가적으로 justify-content align-items justify-contentalign-items 속성을 다른 세로 작업 할 수 있게해야 합니다 justify-content: center 세로로 justify-content: center align-items: centeralign-items: center 가로로 align-items: center )

flex-direction: column 데모

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 18px;
  font-style: oblique;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically aligns items */
  align-items: center;
  /* horizontally aligns items */
}
p {
  margin: 5px;
  }
<div class="box">
  <p>
    When flex-direction is column...
  </p>
  <p>
    "justify-content: center" - vertically aligns
  </p>
  <p>
    "align-items: center" - horizontally aligns
  </p>
</div>

Flexbox로 시작하여 기능 중 일부를보고 브라우저 지원을 최대화하기위한 구문을 얻으려면 flexyboxes 하는 것이 flexyboxes

또한 요즘의 브라우저 지원은 매우 좋습니다.

display: flexalign-items 대한 브라우저 간 호환성을 위해 다음을 사용할 수 있습니다.

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

모든 신용은이 링크 소유자 인 @Sebastian Ekström Link에 전달됩니다 . 이것을 통해 가십시오. 그것을 행동 codepen . 위의 기사를 읽음으로써 나는 또한 데모 바이올린을 만들었습니다.

단지 세 줄의 CSS (공급 업체 접두어 제외)를 사용하면 변환의 도움으로 변환 할 수 있습니다. translateY는 높이를 모르는 경우에도 원하는대로 변환합니다.

CSS 속성 변환은 일반적으로 요소 회전 및 크기 조정에 사용되지만 translateY 함수를 사용하면 요소를 세로로 정렬 할 수 있습니다. 일반적으로 이것은 절대 위치 지정이나 행 높이 설정으로 수행해야하지만 요소의 높이를 알아야하거나 한 줄짜리 텍스트에서만 작동해야합니다.

그래서 이것을하기 위해 다음과 같이 씁니다 :

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

그게 당신이 필요한 전부입니다. 이것은 절대 위치 방법과 비슷한 기술이지만 상위 요소 또는 위치 속성을 높이로 설정하지 않아도됩니다. Internet Explorer 9 에서도 즉시 사용할 수 있습니다!

훨씬 더 간단하게하기 위해 우리는 벤더 접두사와 함께 mixin으로 작성할 수 있습니다.


센터를 수직으로 정렬하는 매우 간단하고 강력한 솔루션 :

.outer-div {
  height: 200px;
  width: 200px;
  text-align: center;
  border: 1px solid #000;
}

.inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: red;
}
<div class="outer-div">
  <span class="inner">No data available</span>
</div>


약간의 시각 효과를 신경 쓰지 않는다면 div 대신 button 안에 설정하십시오.

#box
{
  height: 120px;
  width: 300px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
}
<button Id="box" disabled>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</button>


어디서나 수직 중심 스타일을 원하면 display:table-cellvertical-align:middle display:table-cell 할 수 있습니다.

예:

#box
{
  display: table-cell;
  vertical-align: middle;
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
}
<div Id="box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>


이것에 대한 더 나은 아이디어. 너도 이렇게 할 수있어.

body,
html {
  height: 100%;
}

.parent {
  white-space: nowrap;
  height: 100%;
  text-align: center;
}

.parent:after {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  content: '';
}

.centered {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}
<div class="parent">
  <div class="centered">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>


줄 높이 및 div 높이 호흡에 대한 필요성을 풀기 위해 @michielvoo의 대답을 연장하고 싶습니다. 기본적으로 다음과 같이 단순화 된 버전입니다.

div {
  width: 250px;
  /* height: 100px;
  line-height: 100px; */
  text-align: center;
  border: 1px solid #123456;
  background-color: #bbbbff;
  padding: 10px;
  margin: 10px;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>All grown-ups were once children... but only few of them remember it</span>
</div>

<div>
  <span>And now here is my secret, a very simple secret: It is only with the heart that one can see rightly; what is essential is invisible to the eye.</span>
</div>

참고 : css 일부를 주석 처리하면 divfixed-height 로 설정해야합니다.


클릭 가능한 코끼리가 필요했습니다. 수직으로 중심을 잡았지만 테이블을 사용하지 않고 인터넷 익스플로러 9의 이상 함을 해결했습니다.

나는 결국 내 요구에 맞는 멋진 CSS를 발견했으며 파이어 폭스, 크롬, 인터넷 익스플로러 11에서도 훌륭하다. 슬프게도 인터넷 익스플로러 9는 여전히 웃고있다.

div {
  border: 1px dotted blue;
  display: inline;
  line-height: 100px;
  height: 100px;
}

span {
  border: 1px solid red;
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}

.out {
  border: 3px solid silver;
  display: inline-block;
}
<div class="out" onclick="alert(1)">
  <div> <span><img src="http://www.birdfolk.co.uk/littleredsolo.png"/></span> </div>
  <div> <span>A lovely clickable option.</span> </div>
</div>

<div class="out" onclick="alert(2)">
  <div> <span><img src="http://www.birdfolk.co.uk/bang2/Ship01.png"/></span> </div>
  <div> <span>Something charming to click on.</span> </div>
</div>

분명히 국경은 필요 없지만 어떻게 작동하는지 보도록 도와 줄 수 있습니다.


필자는 writing-mode 경로를 writing-mode 사람이 누구인지 확신 할 수 없지만 문제를 깔끔하게 해결하고 광범위한 지원을 한다고 생각합니다.

.vertical {
  //border: 1px solid green;
  writing-mode: vertical-lr;
  text-align: center;
  height: 100%;
  width: 100%;
}
.horizontal {
  //border: 1px solid blue;
  display: inline-block;
  writing-mode: horizontal-tb;
  width: 100%;
  text-align: center;
}
.content {
  text-align: left;
  display: inline-block;
  border: 1px solid #e0e0e0;
  padding: .5em 1em;
  border-radius: 1em;
}
<div class="vertical">
  <div class="horizontal">
    <div class="content">
      I'm centered in the vertical and horizontal thing
    </div>
  </div>
</div>

물론 이것은 필요한 모든 차원 (부모의 100 % 제외)에서 작동합니다. 경계선 주석 처리를 제거하면 자신을 익히는 것이 도움이됩니다.

JSFiddle 데모 가 당신을 위해 바이올린을합니다.

Caniuse 지원 : 85.22 % + 6.26 % = 91.48 % (심지어 IE가 있습니다!)


이 솔루션을 사용해보십시오.

.EXTENDER {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

.PADDER-CENTER {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

CSS +를 사용하여 제작되었습니다.


귀하의 모든 수직 정렬 요구에!

이 Mixin 선언 :

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

그런 다음 요소에 포함 시키십시오.

.element{
    @include vertical-align();
}

절대 위치 지정 및 스트레칭

위의 방법과 마찬가지로 부모 요소와 자식 요소의 위치 지정을 상대 위치와 절대 위치로 설정합니다. 거기에서 사물이 다릅니다.

아래 코드에서이 메서드를 사용하여 세로 및 세로 모두 자식을 가운데에 맞 춥니 다. 그러나 세로 중심 형으로 만이 메서드를 사용할 수는 있습니다.

HTML

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS

#parent {position: relative;}
#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

이 방법의 아이디어는 위쪽, 아래쪽, 오른쪽 및 왼쪽 값을 0으로 설정하여 자식 요소를 네 가장자리로 늘리려고 시도하는 것입니다. 우리 자식 요소가 부모 요소보다 작기 때문에 모든 요소에 도달 할 수 없으므로 4 가장자리.

그러나 4면 모두에서 여백으로 auto를 설정하면 반대 여백이 동일 해지고 부모 div의 가운데에 자식 div가 표시됩니다.

불행히도 위의 IE7 및 아래에서 작동하지 않습니다 및 이전 방법과 같은 자식 div 안의 내용을 너무 커질 수 있습니다 숨길 수 있습니다.


.box {  
  width: 100%;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

.height {
  line-height: 170px;
  height: 170px;
}

.transform { 
  height: 170px;
  position: relative;
}

.transform p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<h4>Using Height</h4>
<div class="box height">
  Lorem ipsum dolor sit
</div>

<hr />

<h4>Using Transform</h4>
<div class="box transform">
  <p>Lorem ipsum dolor sit</p>
</div>





vertical-alignment