div에서 문자를 수직으로 가운데로 배치하는 방법
전언
전단 개발 과정에서div의 문자를 수직으로 가운데에 놓아야 하는 경우를 자주 볼 수 있다. 다음은 몇 가지 실현 방식을 정리했다.
1. 한 줄 문자 div에서 수직 가운데
만약 용기에 한 줄의 문자만 있다면, 그 글자를 가운데에 배치하는 것이 비교적 간단하다. 우리는 그 용기의 실제 높이height와 줄 높이line-height를 똑같이 설정하면 된다.
div {
height: 200px;
line-height: 200px;
border: 1px solid #FF0099;
background-color: #FFCCFF;
text-align: center
}
데모 보기
2. 여러 줄 텍스트의 고정 높이 가운데 맞춤
CSS에는vertical-align 속성이 확실히 있지만 (X) HTML 요소에valign 특성을 가진 요소만 적용됩니다. 예를 들어 표 요소의'td','th','caption'등이고'div','span'같은 요소는valign 특성이 없기 때문에vertical-align을 사용하면 그것들에 작용하지 않습니다.
그러나 CSS에 디스플레이 속성이 하나 더 있어서'table'을 모의할 수 있습니다. 그래서 우리는 이 속성을 사용하여'div'가'table'을 모의하면vertical-align을 사용할 수 있습니다.디스플레이:table과 디스플레이:table-cell의 사용 방법에 주의하십시오. 전자는 부모 요소에 설정해야 하고, 후자는 하위 요소에 설정해야 합니다. 따라서 포지셔닝이 필요한 텍스트에'div '요소를 추가해야 합니다.
#wrap {
height: 400px;
display: table;
}
#content {
vertical-align: middle;
display: table-cell;
border: 1px solid #FF0099;
background-color: #FFCCFF;
width: 760px;
}
데모 보기
2. 알 수 없는 높이 문자의 세로 가운데 맞춤
만약 한 단락의 내용이 높이가 변할 수 있다면, 우리는 위아래의padding 값을 동일하게 설정하면 된다.마찬가지로 이것도 일종의'보기'수직 거중 방식이다. 이것은 단지 문자를 완전히 채우는 방식일 뿐이다.이런 방법의 장점은 모든 브라우저에서 실행할 수 있고 코드가 간단하다는 것이다. 단지 이런 방법을 응용하는 전제는 용기의 높이가 반드시 신축되어야 한다는 것이다.
div {
padding: 25px;
border: 1px solid #FF0099;
background-color: #FFCCFF;
width: 500px;
}
데모 보기
4. 여러 줄 텍스트의 고정 높이 가운데 맞춤
！
！
div#wrap {
display: table;
border: 1px solid #FF0099;
background-color: #FFCCFF;
width: 500px;
height: 400px;
_position: relative;
overflow: hidden;
}
div#subwrap {
vertical-align: middle;
display: table-cell;
_position: absolute;
_top: 50%;
}
div#content {
_position: relative;
_top: -50%;
}
데모 보기
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSON
JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다.
그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다.
저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
만약 용기에 한 줄의 문자만 있다면, 그 글자를 가운데에 배치하는 것이 비교적 간단하다. 우리는 그 용기의 실제 높이height와 줄 높이line-height를 똑같이 설정하면 된다.
div {
height: 200px;
line-height: 200px;
border: 1px solid #FF0099;
background-color: #FFCCFF;
text-align: center
}
데모 보기
2. 여러 줄 텍스트의 고정 높이 가운데 맞춤
CSS에는vertical-align 속성이 확실히 있지만 (X) HTML 요소에valign 특성을 가진 요소만 적용됩니다. 예를 들어 표 요소의'td','th','caption'등이고'div','span'같은 요소는valign 특성이 없기 때문에vertical-align을 사용하면 그것들에 작용하지 않습니다.
그러나 CSS에 디스플레이 속성이 하나 더 있어서'table'을 모의할 수 있습니다. 그래서 우리는 이 속성을 사용하여'div'가'table'을 모의하면vertical-align을 사용할 수 있습니다.디스플레이:table과 디스플레이:table-cell의 사용 방법에 주의하십시오. 전자는 부모 요소에 설정해야 하고, 후자는 하위 요소에 설정해야 합니다. 따라서 포지셔닝이 필요한 텍스트에'div '요소를 추가해야 합니다.
#wrap {
height: 400px;
display: table;
}
#content {
vertical-align: middle;
display: table-cell;
border: 1px solid #FF0099;
background-color: #FFCCFF;
width: 760px;
}
데모 보기
2. 알 수 없는 높이 문자의 세로 가운데 맞춤
만약 한 단락의 내용이 높이가 변할 수 있다면, 우리는 위아래의padding 값을 동일하게 설정하면 된다.마찬가지로 이것도 일종의'보기'수직 거중 방식이다. 이것은 단지 문자를 완전히 채우는 방식일 뿐이다.이런 방법의 장점은 모든 브라우저에서 실행할 수 있고 코드가 간단하다는 것이다. 단지 이런 방법을 응용하는 전제는 용기의 높이가 반드시 신축되어야 한다는 것이다.
div {
padding: 25px;
border: 1px solid #FF0099;
background-color: #FFCCFF;
width: 500px;
}
데모 보기
4. 여러 줄 텍스트의 고정 높이 가운데 맞춤
！
！
div#wrap {
display: table;
border: 1px solid #FF0099;
background-color: #FFCCFF;
width: 500px;
height: 400px;
_position: relative;
overflow: hidden;
}
div#subwrap {
vertical-align: middle;
display: table-cell;
_position: absolute;
_top: 50%;
}
div#content {
_position: relative;
_top: -50%;
}
데모 보기
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSON
JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다.
그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다.
저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
#wrap {
height: 400px;
display: table;
}
#content {
vertical-align: middle;
display: table-cell;
border: 1px solid #FF0099;
background-color: #FFCCFF;
width: 760px;
}
만약 한 단락의 내용이 높이가 변할 수 있다면, 우리는 위아래의padding 값을 동일하게 설정하면 된다.마찬가지로 이것도 일종의'보기'수직 거중 방식이다. 이것은 단지 문자를 완전히 채우는 방식일 뿐이다.이런 방법의 장점은 모든 브라우저에서 실행할 수 있고 코드가 간단하다는 것이다. 단지 이런 방법을 응용하는 전제는 용기의 높이가 반드시 신축되어야 한다는 것이다.
div {
padding: 25px;
border: 1px solid #FF0099;
background-color: #FFCCFF;
width: 500px;
}
데모 보기
4. 여러 줄 텍스트의 고정 높이 가운데 맞춤
！
！
div#wrap {
display: table;
border: 1px solid #FF0099;
background-color: #FFCCFF;
width: 500px;
height: 400px;
_position: relative;
overflow: hidden;
}
div#subwrap {
vertical-align: middle;
display: table-cell;
_position: absolute;
_top: 50%;
}
div#content {
_position: relative;
_top: -50%;
}
데모 보기
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSON
JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다.
그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다.
저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
！
！
div#wrap {
display: table;
border: 1px solid #FF0099;
background-color: #FFCCFF;
width: 500px;
height: 400px;
_position: relative;
overflow: hidden;
}
div#subwrap {
vertical-align: middle;
display: table-cell;
_position: absolute;
_top: 50%;
}
div#content {
_position: relative;
_top: -50%;
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
