div에서 텍스트를 세로로 정렬하려면 어떻게합니까?
div와 텍스트를 정렬하는 가장 효과적인 방법을 찾으려고합니다. 몇 가지 시도했지만 작동하지 않는 것 같습니다.
.testimonialText {
position: absolute;
left: 15px;
top: 15px;
width: 150px;
height: 309px;
vertical-align: middle;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
padding: 1em 0 1em 0;
}<div class="testimonialText">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>CSS의 수직 센터링
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
기사 요약 :
CSS 2 브라우저의 경우 display:table/ display:table-cell를 사용 하여 콘텐츠를 중앙에 배치 할 수 있습니다 .
JSFiddle 에서도 샘플을 사용할 수 있습니다 .
div { border:1px solid green;}<div style="display: table; height: 400px; overflow: hidden;">
<div style="display: table-cell; vertical-align: middle;">
<div>
everything is vertically centered in modern IE8+ and others.
</div>
</div>
</div>#최신 브라우저에서 스타일을 숨기기 위해 를 사용하여 이전 브라우저 (Internet Explorer 6/7)의 해킹을 스타일로 병합 할 수 있습니다 .
div { border:1px solid green;}<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=
"#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div style=" #position: relative; #top: -50%">
everything is vertically centered
</div>
</div>
</div>line-height속성 을 추가 해야하며 해당 속성은 div. 귀하의 경우 :
.center {
height: 309px;
line-height: 309px; /* same as height! */
}<div class="center">
A single line.
</div>실제로 height속성을 모두 제거 할 수 있습니다.
그러나 이것은 한 줄의 텍스트 에서만 작동 하므로 조심하십시오.
여기에 훌륭한 리소스가 있습니다.
에서 http://howtocenterincss.com/ :
CSS를 중심으로하는 것은 당연한 일입니다. 다양한 요인에 따라이를 수행하는 방법은 무수히 많은 것 같습니다. 이것은 그것들을 통합하고 각 상황에 필요한 코드를 제공합니다.
Flexbox 사용
최신 기술로이 게시물을 최신 상태로 유지하면서 Flexbox를 사용하여보다 쉽게 항목을 중앙에 배치 할 수있는 방법이 있습니다. Flexbox는 Internet Explorer 9 이하 에서 지원되지 않습니다 .
다음은 몇 가지 훌륭한 리소스입니다.
li {
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
/* Column | row */
}<ul>
<li>
<p>Some Text</p>
</li>
<li>
<p>A bit more text that goes on two lines</p>
</li>
<li>
<p>Even more text that demonstrates how lines can span multiple lines</p>
</li>
</ul>또 다른 해결책
이것은 zerosixthree 에서 가져온 것이며 6 줄의 CSS로 무엇이든 중앙에 배치 할 수 있습니다.
이 방법은 Internet Explorer 8 이하 에서 지원되지 않습니다 .
p {
text-align: center;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}<ul>
<li>
<p>Some Text</p>
</li>
<li>
<p>A bit more text that goes on two lines</p>
</li>
<li>
<p>Even more text that demonstrates how lines can span multiple lines</p>
</li>
</ul>이전 답변
표시된 답변의 링크가 약간 구식이므로 유용한 간단하고 브라우저 간 접근 방식입니다.
JavaScript 또는 CSS 줄 높이에 의존하지 않고 정렬되지 않은 목록과 div 모두에서 텍스트를 세로 및 가로 가운데에 맞추는 방법 . 아무리 많은 텍스트가 있더라도 특정 목록이나 div에 특별한 클래스를 적용 할 필요가 없습니다 (코드는 각각 동일합니다). 이것은 Internet Explorer 9, Internet Explorer 8, Internet Explorer 7, Internet Explorer 6, Firefox, Chrome, Opera 및 Safari를 포함한 모든 주요 브라우저에서 작동합니다 . 최신 브라우저에는없는 CSS 제한으로 인해 도움이되는 두 가지 특수 스타일 시트 (하나는 Internet Explorer 7 용이고 다른 하나는 Internet Explorer 6 용)가 있습니다.
Andy Howard-정렬되지 않은 목록 또는 div에서 텍스트를 세로 및 가로 가운데에 맞추는 방법
내가 마지막으로 작업 한 프로젝트에서 Internet Explorer 7/6은별로 신경 쓰지 않았기 때문에 약간 제거 된 버전을 사용했습니다 (예 : Internet Explorer 7 및 6에서 작동하도록 만든 항목 제거). 다른 사람에게 유용 할 수 있습니다 ...
.outerContainer {
display: table;
width: 100px;
/* Width of parent */
height: 100px;
/* Height of parent */
overflow: hidden;
}
.outerContainer .innerContainer {
display: table-cell;
vertical-align: middle;
width: 100%;
margin: 0 auto;
text-align: center;
}
li {
background: #ddd;
width: 100px;
height: 100px;
}<ul>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">
<p>
<!-- Content -->
Content
</p>
</div>
</div>
</div>
</li>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">
<p>
<!-- Content -->
Content
</p>
</div>
</div>
</div>
</li>
</ul>그것은 용이합니다 display: flex. 다음 방법을 사용하면의 텍스트가 div세로 중앙에 배치됩니다.
div {
display: -webkit-flex;
display: flex;
align-items: center;
/* More style: */
height: 300px;
background-color: #888;
}<div>
Your text here.
</div>원하는 경우 수평 :
div {
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
/* More style: */
height: 300px;
background-color: #888;
}<div>
Your text here.
</div>필요한 브라우저 버전이 표시되어야합니다. 이전 버전에서는 코드가 작동하지 않습니다.
다음을 사용하여 임의의 요소를 쉽게 수직 중앙에 배치합니다.
HTML :
<div style="height: 200px">
<div id="mytext">This is vertically aligned text within a div</div>
</div>
CSS :
#mytext {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
이것은 내 텍스트를 div200px 높이 외부의 정확한 수직 중앙에 배치합니다 div. 브라우저 -webkit-에서이 작업을 수행하려면 브라우저 접두사 ( 제 경우 와 같이)를 사용해야 할 수도 있습니다 .
이것은 텍스트뿐만 아니라 다른 요소에도 적용됩니다.
디스플레이를 'table-cell'로 설정하고 다음을 적용하여이를 수행 할 수 있습니다 vertical-align: middle;.
{
display: table-cell;
vertical-align: middle;
}
그러나 이것은 허가없이 http://www.w3schools.com/cssref/pr_class_display.asp 에서 복사 한이 발췌 부분에 따라 모든 버전의 Internet Explorer에서 지원되지 않습니다 .
참고 : "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row"값 -group "및"inherit "는 Internet Explorer 7 및 이전 버전에서 지원되지 않습니다. Internet Explorer 8에는! DOCTYPE이 필요합니다. Internet Explorer 9는 값을 지원합니다.
다음 표는 http://www.w3schools.com/cssref/pr_class_display.asp 에서도 허용되는 표시 값을 보여줍니다 .
요즘 (더 이상 Internet Explorer 6-7-8이 필요하지 않음) display: table이 문제에 CSS 를 사용합니다 (또는 display: flex).
이전 브라우저의 경우 :
표:
.vcenter {
display: table;
background: #eee; /* optional */
width: 150px;
height: 150px;
text-align: center; /* optional */
}
.vcenter > :first-child {
display: table-cell;
vertical-align: middle;
}<div class="vcenter">
<p>This is my Text</p>
</div>굽힘:
.vcenter {
display: flex; /* <-- Here */
align-items: center; /* <-- Here */
justify-content: center; /* optional */
height: 150px; /* <-- Here */
background: #eee; /* optional */
width: 150px;
}<div class="vcenter">
<p>This is my text</p>
</div>이것은 (실제로는)이 문제에 대해 제가 가장 좋아하는 솔루션입니다 (간단하고 잘 지원되는 브라우저).
div {
margin: 5px;
text-align: center;
display: inline-block;
}
.vcenter {
background: #eee; /* optional */
width: 150px;
height: 150px;
}
.vcenter:before {
content: " ";
display: inline-block;
height: 100%;
vertical-align: middle;
max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}
.vcenter > :first-child {
display: inline-block;
vertical-align: middle;
max-width: 99.999%;
}<div class="vcenter">
<p>This is my text</p>
</div>
<div class="vcenter">
<h4>This is my Text<br/>Text<br/>Text</h4>
</div>
<div class="vcenter">
<div>
<p>This is my</p>
<p>Text</p>
</div>
</div>이것을 시도하고 부모 div에 추가하십시오.
display: flex;
align-items: center;
다음은 한 줄의 텍스트에 가장 적합한 솔루션입니다.
줄 수를 알고있는 경우 약간의 조정을 통해 여러 줄로 된 텍스트에서도 작동 할 수 있습니다.
.testimonialText {
font-size: 1em; /* Set a font size */
}
.testimonialText:before { /* Add a pseudo element */
content: "";
display: block;
height: 50%;
margin-top: -0.5em; /* Half of the font size */
}
다음은 JSFiddle 입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 250px;
background: #f8f8f8;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
align-items: center;
-webkit-box-align: center;
justify-content: center;
}
p{
font-size: 24px;
}
</style>
</head>
<body>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
</html>
Flexbox를 사용하여 div 내에서 가운데 텍스트를 세로로 정렬 할 수 있습니다.
<div>
<p class="testimonialText">This is the testimonial text.</p>
</div>
div {
display: flex;
align-items: center;
}
A Complete Guide to Flexbox 에서 자세한 내용을 확인할 수 있습니다 .
이 간단한 솔루션을 확인하십시오.
HTML
<div class="block-title"><h3>I'm a vertically centered element</h3></div>
CSS
.block-title {
float: left;
display: block;
width: 100%;
height: 88px
}
.block-title h3 {
display: table-cell;
vertical-align: middle;
height: inherit
}
테이블 / 테이블 셀에 의존하지 않고 콘텐츠를 수직으로 정렬하는 더 간단한 방법이 있습니다.
그 안에 컨테이너의 전체 높이를 가정하는 보이지 않는 (너비 = 0) div를 추가했습니다.
Internet Explorer 및 Firefox (최신 버전)에서 작동하는 것 같습니다. 다른 브라우저에서 확인하지 않았습니다.
<div class="t">
<div>
everything is vertically centered in modern IE8+ and others.
</div>
<div></div>
</div>
그리고 물론 CSS :
.t, .t > div:first-child
{
border: 1px solid green;
}
.t
{
height: 400px;
}
.t > div
{
display: inline-block;
vertical-align: middle
}
.t > div:last-child
{
height: 100%;
}
이것은 내가 찾은 가장 깨끗한 솔루션 (Internet Explorer 9+)이며 transform-style다른 답변이 생략 된 것을 사용하여 "0.5 픽셀 떨어져 있음"문제에 대한 수정 사항을 추가합니다 .
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.element {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
가치를 모르는 요소에 대한 간단한 해결책 :
HTML
<div class="main">
<div class="center">
whatever
</div>
</div>
CSS
.main {
position: relative
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
Adam Tomat의 답변에 따르면 div 의 텍스트를 정렬 하는 JSFiddle 예제 가 준비 되었습니다 .
<div class="cells-block">
text<br/>in the block
</div>
CSS에서 display : flex 를 사용하여 :
.cells-block {
display: flex;
flex-flow: column;
align-items: center; /* Vertically */
justify-content: flex-end; /* Horisontally */
text-align: right; /* Addition: for text's lines */
}
블로그 게시물 에 다른 예 와 몇 가지 설명이 있습니다.
사용하다:
h1 {
margin: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.container {
height: 200px;
width: 500px;
position: relative;
border: 1px solid #eee;
}<div class="container">
<h1>Vertical align text</h1>
</div>이 트릭을 사용하면 중앙에 "left : 0"을 추가하여 왼쪽으로 정렬하지 않으려면 무엇이든 정렬 할 수 있습니다.
HTML
<div class="relative"><!--used as a container-->
<!-- add content here to to make some height and width
example:<img src="" alt=""> -->
<div class="absolute">
<div class="table">
<div class="table-cell">
Vertical contents goes here
</div>
</div>
</div>
</div>
CSS
.relative {
position: relative;
}
.absolute {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
}
.table {
display: table;
height: 100%;
width: 100%;
text-align: center;
color: #fff;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
flex를 사용하면 브라우저의 렌더링 차이에주의하십시오.
이것은 Chrome과 Internet Explorer 모두에서 잘 작동합니다.
.outer {
display: flex;
width: 200px;
height: 200px;
background-color: #ffc;
}
.inner {
display: flex;
width: 50%;
height: 50%;
margin: auto;
text-align: center;
justify-content: center;
align-items: center;
background-color: #fcc;
}<div class="outer"><div class="inner">Active Tasks</div></div>Chrome에서만 작동하는 다음과 비교하십시오.
.outer {
display: flex;
width: 200px;
height: 200px;
background-color: #ffc;
}
.inner {
display: flex;
width: 50%;
height: 50%;
margin: auto;
background-color: #fcc;
}<div class="outer">
<div class="inner"><span style=" margin: auto;">Active Tasks</span></div>
</div>그리드 항목의 여백 자동.
Flexbox와 마찬가지로 그리드 항목에 여백 자동을 적용하면 두 축의 중앙에 위치합니다.
.container {
display: grid;
}
.element {
margin: auto;
}
이것은 CSS에서 사용 하는 divin a div패턴 의 또 다른 변형입니다 calc().
<div style="height:300px; border:1px solid green;">
Text in outer div.
<div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
Text in inner div.
</div>
</div>
이것은 다음과 같은 이유로 작동합니다.
position:absolutediv내부의 정확한 배치를 위해div- 우리 는
div그것을로 설정했기 때문에 내부의 높이를 알고20px있습니다. calc(50% - 10px)에 대한 50 % - 절반 높이 내부를 센터링div
이것은 잘 작동합니다.
HTML
<div class="information">
<span>Some text</span>
<mat-icon>info_outline</mat-icon>
</div>
Sass
.information {
display: inline-block;
padding: 4px 0;
span {
display: inline-block;
vertical-align: middle;
}
mat-icon {
vertical-align: middle;
}
}
이미지 태그 <mat-icon>(글꼴) 없이 또는 포함합니다 .
이 문제를 해결하는 방법에는 분명히 여러 가지가 있습니다.
그러나 나는 <div>절대적으로 height:100%(실제로 top:0;bottom:0고정 너비) 배치되어 있고 display:table-cell텍스트를 세로로 가운데에 맞추지 못했습니다. 내 솔루션에는 내부 범위 요소가 필요했지만 다른 많은 솔루션도 필요하므로 추가하는 것이 좋습니다.
내 컨테이너는 a .label이고 숫자를 세로로 가운데에 둡니다. 나는 절대적으로 위치를 지정 top:50%하고line-height:0
<div class="label"><span>1.</span></div>
그리고 CSS는 다음과 같습니다.
.label {
position:absolute;
top:0;
bottom:0;
width:30px;
}
.label>span {
position:absolute;
top:50%;
line-height:0;
}
실제 동작보기 : http://jsfiddle.net/jcward/7gMLx/
css를 사용할 수 있습니다 flexbox.
.testimonialText {
height: 500px;
padding: 1em;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #b4d2d2;
}<div class="testimonialText">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>CSS 그리드를 사용하면 다음과 같습니다.
.outer {
background-color: grey;
width: 10rem;
height: 10rem;
display: grid;
justify-items: center;
}
.inner {
background-color: red;
align-self: center;
}<div class='outer'>
<div class='inner'>
Content
</div>
</div>테이블 요소를 포함 해보십시오.
<div>
<table style='width:200px; height:100px;'>
<td style='vertical-align:middle;'>
copenhagen
</td>
</table>
</div>div 중앙에 콘텐츠 또는 이미지를 표시 하는 몇 가지 트릭 이 있습니다. 일부 답변은 정말 훌륭하며 이것에도 전적으로 동의합니다.
CSS의 절대 수평 및 수직 센터링
예제와 함께 10 개 이상의 기술이 있습니다 . 이제 당신이 선호하는 것은 당신에게 달려 있습니다.
의심 할 여지없이 display:table; display:table-Cell더 나은 속임수입니다.
몇 가지 좋은 트릭은 다음과 같습니다.
트릭 1-사용 display:table; display:table-cell
HTML
<div class="Center-Container is-Table">
<div class="Table-Cell">
<div class="Center-Block">
CONTENT
</div>
</div>
</div>
CSS 코드
.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
display: table-cell;
vertical-align: middle;
}
.is-Table .Center-Block {
width: 50%;
margin: 0 auto;
}
트릭 2-사용하여 display:inline-block
HTML
<div class="Center-Container is-Inline">
<div class="Center-Block">
CONTENT
</div>
</div>
CSS 코드
.Center-Container.is-Inline {
text-align: center;
overflow: auto;
}
.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
display: inline-block;
vertical-align: middle;
}
.Center-Container.is-Inline:after {
content: '';
height: 100%;
margin-left: -0.25em; /* To offset spacing. May vary by font */
}
.is-Inline .Center-Block {
max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
/* max-width: calc(100% - 0.25em) /* Only for Internet Explorer 9+ */
}
트릭 3-사용하여 position:relative;position:absolute
<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
<div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
<h4>ABSOLUTE CENTER, <br/>
WITHIN CONTAINER.</h4>
<p>This box is absolutely centered, horizontally and vertically, within its container</p>
</div>
</div>
CSS :
.vertical {
display: table-caption;
}
수직으로 정렬하려는 항목이 포함 된 요소에이 클래스를 추가하십시오.
min-height속성 과 함께 사용해야하는 경우이 CSS를 다음에 추가해야합니다.
.outerContainer .innerContainer {
height: 0;
min-height: 100px;
}
참고 URL : https://stackoverflow.com/questions/2939914/how-do-i-vertically-align-text-in-a-div
'development' 카테고리의 다른 글
| 파이썬에서 상수를 어떻게 생성합니까? (0) | 2020.09.28 |
|---|---|
| Objective-C의 typedef 열거 형은 무엇입니까? (0) | 2020.09.27 |
| Pandas DataFrame에서 열 삭제 (0) | 2020.09.27 |
| "python -m SimpleHTTPServer"에 해당하는 Python 3는 무엇입니까? (0) | 2020.09.27 |
| 속성별로 사용자 지정 개체의 ArrayList 정렬 (0) | 2020.09.27 |