div 블록 내부의 CSS 중앙 텍스트 (가로 및 세로)
( 및 ) 로 div설정하고 내부에 텍스트가 있습니다.display:block90px heightwidth
텍스트를 세로 및 가로로 가운데에 정렬해야합니다.
나는 시도 text-align:center했지만 수평 부분을 수행하지 않아 시도 vertical-align:middle했지만 작동하지 않았습니다.
어떤 아이디어?
텍스트 및 / 또는 이미지 한 줄이면 쉽게 할 수 있습니다. 다음을 사용하십시오.
text-align: center;
vertical-align: middle;
line-height: 90px; /* The same as your div height */
그게 다야. 여러 줄이 될 수있는 다소 복잡합니다. 그러나 http://pmob.co.uk/ 에 솔루션이 있습니다 . "수직 정렬"을 찾으십시오.
해킹이거나 복잡한 div를 추가하는 경향이 있기 때문에 일반적으로 단일 셀이있는 테이블을 사용하여 가능한 한 간단하게 만듭니다.
2016/2017 업데이트 :
에서 더 일반적으로 수행 할 수 있으며 transform인터넷 익스플로러 (10) 및 인터넷 익스플로러 11과 같은 이전 브라우저에서도 잘 작동합니다. 여러 줄의 텍스트를 지원할 수 있습니다.
position: relative;
top: 50%;
transform: translateY(-50%);
예 : https://jsfiddle.net/wb8u02kL/1/
너비를 줄이려면 :
위의 솔루션은 콘텐츠 영역에 고정 너비를 사용했습니다. 포장 너비를 사용하는 비용
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
예 : https://jsfiddle.net/wb8u02kL/2/
나는 flexbox를 동일한 어느 정도지만 Internet Explorer 10과 일부 이전 버전의 Internet Explorer에서 깨질 수 있기 때문에 신뢰할 수 있습니다.
2014 년 현재 일반적인 기술 :
접근 1-
transformtranslateX/translateY:에서 지원되는 브라우저 (대부분), 당신은 사용할 수 있습니다
top: 50%/left: 50%와 함께translateX(-50%) translateY(-50%)수평 요소를 중심으로 / 동적 수직으로..container { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }
2-Flexbox 방법 :
에서 지원되는 브라우저 의
display대상에 요소의flex사용을align-items: center수직 중심과justify-content: 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/을height에100%추가합니다display: table. 그런 다음 하위 요소를 들어, 변경display에table-cell추가합니다vertical-align: middle.수평
text-align: center중앙 정렬의 경우 텍스트 및 기타inline하위 요소 를 중앙에 추가 할 수 있습니다 . 또는margin: 0 auto요소가block레벨 이라고 가정하여 사용할 수 있습니다 .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의 경우 부모 요소의 고정 높이와 동일한 값을 마이너스 요소에 설정하기 만하면됩니다.-이 솔루션은 어떤 경우에 작동하지만,의 가치는 그것 여러 줄의 텍스트가있는 경우는 작동하지 않습니다 지적 과 같습니다 .
.parent { height: 200px; width: 400px; text-align: center; } .parent > .child { line-height: 200px; }
방법 4와 5는 가장 많은 수 없습니다. 처음 3 개 중 하나로 이동합니다.
Flexbox / CSS 사용 :
<div class="box">
<p>അ</p>
</div>
CSS :
.box{
display: flex;
justify-content: center;
align-items: center;
}
Quick Tip 에서 발췌 : 요소를 수직 및 수평으로 가운데에 맞추는 가장 간단한 방법
display: table-cell;해당 div의 CSS 콘텐츠에 줄 을 추가합니다 .
테이블 셀만을 지원 vertical-align: middle;하지만 [table-cell] 정의를 div에 수 있습니다.
실제 예제는 다음과 가변됩니다 : http://jsfiddle.net/tH2cc/
div{
height: 90px;
width: 90px;
text-align: center;
border: 1px solid silver;
display: table-cell; // This says treat this element like a table cell
vertical-align:middle; // Now we can center vertically like in a TD
}
이를 위해 매우 쉬운 코드를 시도 할 수 있습니다.
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>Codepen 링크 : http://codepen.io/santoshkhalse/pen/xRmZwr
나는 항상 컨테이너에 다음 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/ 에서 실제로 확인하십시오.
이 CSS 클래스를 대상 <div>에 제공합니다.
.centered {
width: 150px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: red; /* Not necessary just to see the result clearly */
}<div class="centered">This text is centered horizontally and vertically</div>접근 방식 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>가장 좋은 방법 중 하나는 flex상위 div에서 margin:auto속성을 사용하고 요소 태그에 속성을 추가하는 것입니다 .
.parent {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
p {
margin: auto;
}
<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>
# 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
}
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}<div>
Hello, World!!
</div>.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>이것은 나를 위해 작동합니다 (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 %가 아닌 다른 값을 선택할 수 있습니다. 예를 들어 25 %는 상위 항목의 25 %를 중심으로합니다.
<!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 태그 안에 텍스트가 있고 ID를 제공하십시오. 해당 ID에 대해 다음 속성을 정의합니다.
id-name { height: 90px; line-height: 90px; text-align: center; border: 2px dashed red; }참고 : line-height 속성이 분할과 동일한 지 확인하십시오.
한 단어 이상이거나 한 줄이면 작동하지 않습니다. 또한 분할 크기를 px 또는 %로 수없는 경우도 있습니다 (나눗셈이 정말 작고 콘텐츠가 중간에 있기를 원하는 경우).
이 문제를 해결하기 위해 다음과 같은 속성 조합을 시도 할 수 있습니다.
id-name { display: flex; justify-content: center; align-items: center; border: 2px dashed red; }이 3 줄의 코드는 디스플레이의 크기에 관계없이 분할 중간에 콘텐츠를 정확하게 설정합니다. "정렬-항목 : 센터는" 수직 중심에 도움 동안 "정당화 - 내용 : 센터" 가 수평으로 중심을 다할 것입니다.
참고 : Flex는 모든 브라우저에서 작동하지 않습니다. 추가 브라우저 지원을 위해 적절한 공급 업체 접두사를 추가해야합니다.
수직 정렬을 위해 선 높이를 조정합니다.
line-height: 90px;
이것이 정답이되어야합니다. 가장 깨끗하고 간단한 :
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
스타일 적용 :
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 */
}
저에게는 이것이 최고의 솔루션이었습니다.
HTML :
<div id="outer">
<img src="logo.png">
</div>
CSS :
#outer {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
<!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>
#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>
'ProgramingTip' 카테고리의 다른 글
| std :: string을 다듬는 가장 좋은 방법은 무엇입니까? (0) | 2020.09.29 |
|---|---|
| Visual Studio의 프로젝트에 기존 디렉터리 트리를 추가 비용하나요? (0) | 2020.09.29 |
| Android Studio의 코드 단축키 (0) | 2020.09.29 |
| 딕셔너리에서 최대 값을 가진 키를 얻었습니까? (0) | 2020.09.29 |
| Xcode 프로세스 시작 실패 : 보안 (0) | 2020.09.29 |