I have a div 요소를 포함하는 텍스트, 난 로렌아줌마가 정렬하려면 이 콘텐트입니다 div 세로일 센터.
Div 슬라이드에서는 내 스타일.
<! - begin 스니핏: js 숨기십시오: > 거짓값 -;
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}
<div id="box">
Lorem ipsum dolor sit
</div>
끝 - < 스니핏 >;!
What is the best way to do this?
이러한 기본 외곽진입 시도해 볼 수 있습니다.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}
<div>
Hello World!
</div>
끝 - < 스니핏 >;!
이 때문에 한 줄의 텍스트에 대한 때만 표시되어도 설정했습니다 line& # 39 의 높이와 같은 높이로 redboot*용 기입란 요소.
이것은 또 다른 방식으로 텍스트 정렬하려면 세로일. 이 솔루션은 단일 품목 및 여러 줄의 텍스트를, 사용할 수 있지만 여전히 높이 컨테이너입니다 고정식입니다 필요합니다.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
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>
끝 - < 스니핏 >;!
그냥 ',', 크기, CSS 를 < div> 세로일 센터 ',', '이 < 정렬되고 span> < div>,' & # 39, s 라인 높이 설정하여, 같은 해, 을 (를) ',' 및 '는 인라인 블록 span> < 높이가 수직 정렬: 중간 '. 그런 다음, 다시 정상 ',' 라인 높이 설정합니다 대한 내용을 자연스럽게 인사이드라면 < span> 때문에 자연스럽게 블록.
그리고 여기 다른 옵션을 사용할 수 없는 tfsnap 브라우저 don& 있는 # 39, t 지원 '디스플레이: 표 '와' 디스플레이: 표에서 ' (기본적으로 인터넷 익스플로러 7). 우리가 사용하는 비헤이비어를 시뮬레이션합니다 표 (테이블 지원 이후 vertical alignment), CSS 와 HTML 이 동일합니까 두 번째 예제:
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
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>
끝 - < 스니핏 >;!
이 기법을 사용하는 밀어버릴꺼에요 포지셔닝됩니까 요소점 설정값입니다 위, 아래, 좌우로 0. 이 기사에 자세히 설명되어 스매싱 저장실이 상대경로를 중심으로 CSS 의 수평 및 수직 .
(여기서 말하는 것은 아직) 는 다른 방법을 통해 플렉상자.
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
<! - begin 스니핏: js 숨기십시오: 참 - >.
.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>
끝 - < 스니핏 >;!
또는 정비를 통해 컨텐츠를 컨테이너입니다 플렉상자 대신 중앙에 있는 a 피쳐도 flex 품목으로부터 [ui_policytable_java_spe_policy 자동 여백] [3] 에 flex 컨테이너입니다 flex 품목으로부터 하나밖에 없는 경우 (예 예 주어진 위의 질문에).
그래서 그냥 flex 항목 가운데 '자동' 으로 설정되었습니다 수평과 수직으로 모두 승리를 거두었다.
<! - begin 스니핏: js 숨기십시오: 참 - >.
.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>
끝 - < 스니핏 >;!
<! - begin 스니핏: js 숨기십시오: 참 - >.
.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>
끝 - < 스니핏 >;!
시작하기에 좋은 플렉상자 볼 수 있는 일부 기능 및 프레젠테이션이든 구문 플렉이상자레스 은 최대 브라우저 지원
또한, 브라우저 지원은 매우 좋은 것 같아요. [카니우스] [7]
크로스 브라우저 호환성을 위해 "에 대한 디스플레이: flex '와' 다음 '항목에서와 맞추십시오. 사용할 수 있습니다.
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;
[3]: https://www.w3.org/TR/css-flexbox-1/ # 자동 여유폭
[7]: http://caniuse.com/ # 성과 = 플렉상자
이 작업을 쉽게 수행할 수 있습니다 다음 블렌드합니다 추가하기만 CSS 의 코드:
display: table-cell;
vertical-align: middle;
즉, 사용자 CSS 마지막으로 다음과 같습니다.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
#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%);
}
또는 비호환성의 자스 / scs 믹스인:
@mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
사용하는:
.class-to-center {
@include vertical-align;
}
이 방법으로 인해 발생할 수 있는 요소 요소에 흐린 배치하는 "반단면 픽셀입니다." 이를 위한 솔루션 설정되었습니다 부모 요소를 보존할지 dl3d. 다음과 같은
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
우리가 사는 2015년 + 2 와 [flex 기입란] 모든 주요 현대 있지만브라우저에 의해 지원됩니다.
여기서 만든 웹 사이트가 될 것이라고 운행에서어떠한 on out.
[1]: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ # 246 ", 세바스티안 Ekstr& m";
이 모든 크레딧보다 마이그레이션된 @Sebastian Ekstr& 246, m, 링크 # https://partner. 소유자에게도 가서 이를 통해. 실제로 확인해 보십시오. 고데펜. 위의 기사를 읽고 난 또 생성되는가 [데모 바이올린] [3].
부트해 CSS 3 선을 제외한 구입업체별 접두사) we can do it 를 통해 변형. 우리가 원하는 어떤 경우에도 높이가 트란스라트리 세로일 센터급 아무도 모릅니다.
일반적으로 사용되는 회전 및 비율 조정 요소가 있지만, CSS 속성을 변형 함수 이제 색상에는 트란스라트리 세로일 맞추십시오 요소. 일반적으로 이 해야 할 수 있지만, 이러한 설정을 통해 상대경로를 포지셔닝도 또는 정상에 선 인컨텍스트 요소이거나 높이를 알 수 있는 한 줄 때만 텍스트, etc.
그래서, 그렇게 하려면 쓰기:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
다냐구요 합니다. 정보기술 (it) 도 비슷한 기법을 절대 포지셔닝하십시오 메서드입니다 갖추고 있지만, 우리가 업사이드 필요없다우 요소이거나 포지셔닝하십시오 속성 설정하고 있는 높이 상위. Out of the box), 심지어 작동하잖아 직선입니다 internet&;; 빨리, 빨리 explorer& 9!
이를 위해, 우리는 이를 더욱 간단한 믹스인 색상에는 구입업체별 접두사를 쓸 수 있다.
Css3 에 도입된 플렉상자레스 오른길로 해결책:
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
/* Important */
section {
display: flex;
display: -webkit-flex;
}
p {
/* Key Part */
margin: auto;
}
/* Unimportant, coloring and UI */
section {
height: 200px;
width: 50%;
margin: auto;
border-radius: 20px;
border: 3px solid orange;
background-color: gold;
}
p {
text-align: center;
font-family: Calibri;
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;
이 같은 건 물론, 트릭 수행됨 격자선 (즉, '디스플레이: 격자선 '), 있다.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
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>
끝 - < 스니핏 >;!
이 솔루션은 수락됨 해결책이라고 완벽하겠어요 사용할 수 있지만, 이 솔루션은 '높이' 라인 높이 동일합니까 div 가 작동하지 않을 때 텍스트는 완벽하게 랩된 또는 두 개의 선으로
이 경우 1 개 또는 여러 개의 선이 인사이드라면 랩된 텍스트는 시도하시겠습니까 켜있을 div.
#box
{
display: table-cell;
vertical-align: middle;
}
자세한 참조에는 지켜보리니:
종료기 netwin:
<! - begin 스니핏: js 숨기십시오: > 거짓값 -;
<! - 언어: > css 랭 -;
오레스테네르 { 위치: 절대. top: 0px; 왼쪽: 0px; 아래쪽: 0px; 오른쪽: 0px; 가로: 100%, 높이: 100%, 오버플로입니다 y: 숨겨짐. 오버플로입니다 x: 숨겨짐. }
.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+.
스니핏 참조로 다음 코드를 사용할 수 있습니다. 같은 날 위해 일하는 것이 매력.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
<!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>
끝 - < 스니핏 >;!
위의 코드를 출력물에는 스니핏 것으로 다음과 같습니다.
또 다른 방법은.
그래서 가는 대신 호스트당:
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 위, 아래 왼쪽 및 오른쪽' 제로 '를' 및 '60px 패딩' 을 하고 있다 '' div 120 픽셀입니다 구성형 높이를 조절할 글꼴색) 높고 텍스트 세로일 중앙에 배치하고 div.
여기 다른 옵션을 사용하여 플렉상자.
<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;
}
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 거짓값 바벨. > 거짓값 -;
<div class="vertical">
<div class="horizontal">
<div class="content">
I'm centered in the vertical and horizontal thing
</div>
</div>
</div>
.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;
}
끝 - < 스니핏 >;!
그러면 당연히 필요한 모든 치수에는 작동합니까 (목동들과 100% 의 상위). 이 경우, 주석, 경계선 it& # 39 숙지합니다 도움이 될 겁니다.
[이스피들 데모] [1] 를 해야했다.
[카니우스 지원] [2]: + 6.26 %91.48 %85.22%) = (심지어 internet&, nbsp; explorer 가!)
[2]: http://caniuse.com/ # 성과 = css 기록 방식
더욱 좋은 아이디어 엔드입니다. 이렇게 할 수 있어 너무
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
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>
끝 - < 스니핏 >;!
이 너희가운데 믹스인:
@mixin vertical-align($position: relative) {
position: $position;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
그럼 포함시켜야 요소:
.element{
@include vertical-align();
}
한 줄의 텍스트를 위한 (또는 하나의 캐릭터) 이 기술을 사용할 수 있습니다.
이 때 사용할 수 있다 '는' , # % 확인란 고정되지 않은 상대 높이.
div id = '<;;;;' /div> < > " box".
#box::before {
display: block;
content: "";
height: 50%;
}
#box::after {
vertical-align: top;
line-height: 0;
content: "TextContent";
}
라이브 데모를 지켜보리니 [dell. 이스빈] [1] (쉽게 편집할 수 CSS) 또는 [이스피들] [2] (간소화하는지 세로폭 변경하시려면 결과 프레임).
Html, CSS, 그럼 스케쳐내 내부 텍스트의 배치할 필요가 없는 랩 텍스트 내용 추가 # 요소 및 편집 '' 인라인 이후 기입란 일치시키려면 거잖나. (물론, '속성' 컨텐츠 제거해야 합니다.)
예를 들어, div id = '<;;;;;;;; < " box" > < span> TextContent< /span> /div>,'. 이 경우, '#' '' # 기입란 스팬합니다 이후 기입란 대체해야 합니다.
, 빨리, 빨리 Explorer& Internet& 위한 8 지원 '을 (를)', ':':: 교체해야 합니다.
[1]: html, css, 출력입니다 http://jsbin.com/ipujIyeM/2/edit?
변형 시도하시겠습니까 속성:
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
#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>
끝 - < 스니핏 >;!
(이를 [# 39 의 Michielvoo& 다용성 방법이 간단하고 테이블 외곽진입] [1]).
[ctrv]{
display:table !important;
}
[ctrv] > *{ /* adressing direct discendents */
display: table-cell;
vertical-align: middle;
// text-align: center; /* optional */
}
이 속성을 사용하여 (또는 avamer 클래스) 에 대해서도 많은 아이들이 모피쳐 태그번호 작동됨 정렬하려면:
<parent ctrv> <ch1/> <ch2/> </parent>
[1]: # 8865463 https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css/8865463
매우 간단한 &. 가장 강력한 솔루션이므로 세로로 정렬하려면 자켓 사진 (표지):
<! - begin 스니핏: js 숨기십시오: > 거짓값 -;
.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>
끝 - < 스니핏 >;!