질문자 :Irakli Lekishvili
텍스트가 포함된 <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>이 목표를 달성하는 가장 좋은 방법은 무엇입니까?
다음과 같은 기본 접근 방식을 시도해 볼 수 있습니다.
div { height: 100px; line-height: 100px; text-align: center; border: 2px dashed #f69c55; } <div> Hello World! </div>하지만 한 줄의 텍스트에서만 작동합니다. 줄의 높이를 포함하는 상자 요소와 같은 높이로 설정하기 때문입니다.
이것은 텍스트를 세로로 정렬하는 또 다른 방법입니다. 이 솔루션은 한 줄과 여러 줄의 텍스트에서 작동하지만 여전히 고정 높이 컨테이너가 필요합니다.
div { height: 100px; line-height: 100px; text-align: center; border: 2px dashed #f69c55; } span { display: inline-block; vertical-align: middle; line-height: normal; } <div> <span>Hello World!</span> </div> CSS는 단지 크기 <div> 수직 중심 춥니 <span> 설정에 따라 <div> 높이 동등의 라인 높이와 수 <span> 와 인라인 블록 vertical-align: middle . <span> 대해 line-height를 다시 정상으로 설정하여 내용이 블록 내부에서 자연스럽게 흐르도록 합니다.
display: table 및 display: table-cell (기본적으로 Internet Explorer 7만 해당)을 지원하지 않는 이전 브라우저에서는 작동하지 않을 수 있는 또 다른 옵션이 있습니다. CSS를 사용하여 테이블 동작을 시뮬레이션하고(테이블이 수직 정렬을 지원하기 때문에) HTML은 두 번째 예제와 동일합니다.
div { display: table; height: 100px; width: 100%; text-align: center; border: 2px dashed #f69c55; } span { display: table-cell; vertical-align: middle; } <div> <span>Hello World!</span> </div>이 기술은 상단, 하단, 왼쪽 및 오른쪽을 0으로 설정하는 절대 위치 요소를 사용합니다. 이는 Smashing Magazine, Absolute Horizontal And Vertical Centering In CSS 의 기사에 자세히 설명되어 있습니다.
div { display: flex; justify-content: center; align-items: center; height: 100px; width: 100%; border: 2px dashed #f69c55; } <div> <span>Hello World!</span> </div>아직 언급되지 않은 또 다른 방법은 Flexbox를 사용하는 것 입니다.
컨테이너 요소에 다음 코드를 추가하기만 하면 됩니다.
display: flex; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */ .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
.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-items를 수직 열에 flex-direction: column 을 컨테이너에 설정하여 주축을 열로 설정하고 추가로 justify-content 및 align-items 속성이 이제 다른 쪽에서 작동하도록 해야 합니다. 와 주변의 방법으로 justify-content: 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의 일부 기능을 확인하고 최대 브라우저 지원을 위한 구문을 얻기 위해 Flexbox를 시작하기에 좋은 곳은 flexyboxes입니다.
또한 요즘 브라우저 지원이 매우 좋습니다. caniuse
display: flex 및 align-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;다음 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>참조를 위해 더 간단한 답변을 추가하려면:
순수 CSS:
.vertical-align { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }또는 SASS/SCSS Mixin으로:
@mixin vertical-align { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }사용:
.class-to-center { @include vertical-align; }Sebastian Ekström의 블로그 게시물 Vertical은 CSS의 단 3줄로 모든 항목을 정렬합니다 .
이 방법을 사용하면 요소가 "절반 픽셀"에 배치되어 요소가 흐릿해질 수 있습니다. 이에 대한 해결책은 부모 요소를 보존-3d로 설정하는 것입니다. 다음과 같이:
.parent-element { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; }우리는 2015년 이상에 살고 있으며 Flex Box 는 모든 주요 최신 브라우저에서 지원됩니다.
지금부터 웹사이트가 만들어지는 방식이 될 것입니다.
그것을 배우십시오!
모든 크레딧은 이 링크 소유자 @Sebastian EkströmLink 에게 돌아갑니다. 이것을 통과하십시오. 행동 codepen 에서 그것을 참조하십시오. 위의 기사를 읽으면서 데모 바이올린 도 만들었습니다.
단 세 줄의 CSS(공급업체 접두사 제외)만 있으면 변환을 통해 이를 수행할 수 있습니다. translateY는 높이를 알지 못하더라도 원하는 모든 것을 수직으로 중앙에 배치합니다.
CSS 속성 변환은 일반적으로 요소를 회전하고 크기를 조정하는 데 사용되지만, translateY 기능을 사용하여 이제 요소를 세로로 정렬할 수 있습니다. 일반적으로 이것은 절대 위치 지정 또는 줄 높이 설정으로 수행되어야 하지만, 이를 위해서는 요소의 높이를 알고 있거나 한 줄 텍스트에서만 작동하는 등의 작업이 필요합니다.
이를 위해 다음과 같이 작성합니다.
.element { position: relative; top: 50%; transform: translateY(-50%); }그게 다야. 절대 위치 방법과 유사한 기술이지만 상위 요소의 높이나 부모의 위치 속성을 설정할 필요가 없다는 장점이 있습니다. Internet Explorer 9 에서도 즉시 작동합니다!
더 간단하게 만들기 위해 공급업체 접두사를 사용하여 믹스인으로 작성할 수 있습니다.
CSS3 flexbox에는 아주 작은 마법이 있습니다.
/* Important */ section { display: flex; display: -webkit-flex; } section p { /* Key Part */ margin: auto; } /* Unimportant, coloring and UI */ section { height: 200px; width: 60%; margin: auto; border-radius: 20px; border: 3px solid orange; background-color: gold; } section p { text-align: center; font-family: Cantarell, Calibri; font-size: 15px; background-color: yellow; border-radius: 20px; padding: 15px; } <section> <p> I'm a centered box!<br/> Flexboxes are great! </p> </section>팁 : 텍스트를 가운데에 맞추려면 "핵심 부분"으로 표시된 위의 줄을 다음 줄 중 하나로 교체합니다.
수직으로만:
margin: auto 0;가로로만:
margin: 0 auto; 내가 알아차렸듯이, 이 트릭은 그리드(예: display: grid )에서도 작동합니다.
그래픽 접근
div { width: 250px; min-height: 50px; line-height: 50px; text-align: center; border: 1px solid #123456; margin-bottom: 5px; } span { display: inline-block; vertical-align: middle; line-height: normal; } <div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div> <div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div> <div> <span>Lorem ipsum dolor sit amet.</span> </div> <div>이전 답변을 보았고 해당 화면 너비(응답하지 않음)에서만 작동합니다. 반응형의 경우 flex를 사용해야 합니다.
예시:
div { display:flex; align-items:center; }답변으로 받아들여진 솔루션 line-height 를 사용하는 것이 완벽하지만, 이 솔루션은 텍스트가 줄 바꿈되거나 두 줄로 된 경우 완벽하게 작동하지 않습니다.
텍스트가 줄 바꿈되었거나 div 내부의 여러 줄에 있는 경우 이 방법을 시도해 보세요.
#box { display: table-cell; vertical-align: middle; }자세한 내용은 다음을 참조하세요.
다음은 flexbox를 사용하는 또 다른 옵션입니다.
<div id="container"> <div class="child"> <span >Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, nemo.</span > </div> </div> #container { display: flex; } .child { margin: auto; } 
다음은 css의 센터링에 대한 훌륭한 기사입니다. 확인 https://ishadeed.com/article/learn-css-centering/
이 솔루션을 시도하십시오.
.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+를 사용하여 구축되었습니다.
다음 코드 조각을 참조로 사용할 수 있습니다. 그것은 나를 위해 매력처럼 작동합니다.
<!DOCTYPE html> <html lang="de"> <head> <title>Vertically Center Text</title> <style> html, body { height: 100%; margin: 0; padding: 0; width: 100%; } body { display: table; } .centered-text { text-align: center; display: table-cell; vertical-align: middle; } </style> </head> <body style="background:#3cedd5"> <div class="centered-text"> <h1>Yes, it's my landing page</h1> <h2>Under construction, coming soon!!!</h2> </div> </body> </html>위 코드 조각의 출력은 다음과 같습니다.
아래 속성을 사용할 수도 있습니다.
display: flex; align-content: center; justify-content : center;또 다른 방법:
div height 속성을 설정하지 말고 대신 padding: 을 사용하여 효과를 얻으십시오. line-height와 유사하게 한 줄의 텍스트가 있는 경우에만 작동합니다. 이런 식으로 더 많은 콘텐츠가 있는 경우 텍스트는 여전히 중앙에 있지만 div 자체는 약간 더 커집니다.
따라서 다음을 사용하는 대신:
div { height: 120px; line-height: 120px; }다음과 같이 말할 수 있습니다.
div { padding: 60px 0; // Maybe 60 minus font-size divided by two, if you want to be exact } div 의 위쪽 및 아래쪽 padding 이 60px 로 설정되고 왼쪽 및 오른쪽 padding 이 0으로 설정되어 div 120픽셀(글꼴 높이 포함) 높이가 되고 텍스트가 div의 세로 중앙에 배치됩니다.
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% (Internet Explorer도 있습니다!)
모든 수직 정렬 요구 사항에 적합합니다!
이 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(); }이것에 대한 더 나은 아이디어. 당신도 이렇게 할 수 있습니다
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>한 줄의 텍스트(또는 단일 문자)에 대해 다음 기술을 사용할 수 있습니다.
#box 고정되지 않은 상대 높이가 % 인 경우 사용할 수 있습니다.
<div id="box"></div>
#box::before { display: block; content: ""; height: 50%; } #box::after { vertical-align: top; line-height: 0; content: "TextContent"; }JsBin (CSS 편집이 더 쉬움) 또는 JsFiddle (결과 프레임의 높이 변경이 더 쉬움)에서 라이브 데모를 참조하세요.
CSS가 아닌 HTML에 내부 텍스트를 배치하려면 텍스트 콘텐츠를 추가 인라인 요소로 래핑하고 일치하도록 #box::after (물론 content: 속성은 제거되어야 합니다.)
예: <div id="box"><span>TextContent</span></div> . 이 경우 #box::after 를 #box span 으로 바꿔야 합니다.
Internet Explorer 8을 지원하려면 :: 를 : 바꿔야 합니다.
변환 속성을 시도하십시오.
#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>중심을 수직으로 정렬하는 매우 간단하고 강력한 솔루션:
.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>간단하고 다양한 방법은 다음과 같습니다(Michielvoo의 테이블 접근 방식 ).
[ctrv]{ display:table !important; } [ctrv] > *{ /* adressing direct discendents */ display: table-cell; vertical-align: middle; // text-align: center; /* optional */ }부모 태그에서 이 속성(또는 동등한 클래스)을 사용하면 많은 자식이 정렬하는 경우에도 작동합니다.
<parent ctrv> <ch1/> <ch2/> </parent>다음 코드는 화면 크기나 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 에 대한 자세한 내용은 여기를 참조하세요.
다음 코드를 시도하십시오.
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>라인 높이와 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 주석 처리된 부분은 둘러싸는 div fixed-height 에 필요합니다.
세로 중앙에 클릭할 수 있는 코끼리 행이 필요했지만 Internet Explorer 9의 이상함을 피하기 위해 테이블을 사용하지 않았습니다.
마침내 (내 필요에 맞는) 가장 멋진 CSS를 찾았고 Firefox, Chrome 및 Internet Explorer 11에서 훌륭합니다. 슬프게도 Internet Explorer 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>분명히 테두리가 필요하지 않지만 어떻게 작동하는지 확인하는 데 도움이 될 수 있습니다.
CSS에서 위치 지정 방법을 사용할 수 있습니다.
HTML:
<div class="relativediv"> <p> Make me vertical align as center </p> </div>CSS:
.relativediv{position:relative;border:1px solid #ddd;height:300px;width:300px} .relativediv p{position:absolute:top:50%;transfrom:translateY(-50%);}여러분도 이 방법을 사용하시길 바랍니다.
세로 중심 스타일을 원하는 곳마다 display:table-cell 및 vertical-align:middle 시도할 수 있습니다.
예시:
#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>작은 시각적 3D 효과에 신경 쓰지 않는다면 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>절대 위치 지정 및 스트레칭
위의 방법과 마찬가지로 이 방법은 부모 및 자식 요소의 위치를 각각 상대 및 절대로 설정하여 시작합니다. 거기에서 상황이 다릅니다.
아래 코드에서 이 방법을 다시 한 번 사용하여 자식을 가로 및 세로로 중앙에 배치했습니다. 하지만 이 방법은 세로 가운데 맞춤에만 사용할 수 있습니다.
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면 모두의 여백으로 auto를 설정하면 반대쪽 여백이 동일하게 되고 부모 div의 중앙에 자식 div가 표시됩니다.
불행히도 위의 내용은 Internet Explorer 7 이하에서는 작동하지 않으며 이전 방법과 마찬가지로 자식 div 내부의 콘텐츠가 너무 커져 숨겨질 수 있습니다.
.element{position: relative;top: 50%;transform: translateY(-50%);}요소의 CSS 속성에 이 작은 코드를 추가합니다. 굉장하다. 시도 해봐!
출처 : http:www.stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css
| Matplotlib으로 그린 그림의 크기를 어떻게 변경합니까? (0) | 2021.11.23 |
|---|---|
| JavaScript에서 십진수 유효성 검사 - IsNumeric() (0) | 2021.11.23 |
| 목록의 마지막 요소를 얻는 방법은 무엇입니까? (0) | 2021.11.23 |
| npm 설치를 위한 --save 옵션은 무엇입니까? (0) | 2021.11.23 |
| 문자열을 날짜 시간으로 변환 (0) | 2021.11.23 |