source

div 블록 내에서 텍스트(수평 및 수직)를 중앙에 배치하려면 어떻게 해야 합니까?

manycodes 2023. 5. 16. 22:47

div 블록 내에서 텍스트(수평 및 수직)를 중앙에 배치하려면 어떻게 해야 합니까?

나는 있습니다div로 설정한.display:block(90px height그리고.width 저는 안에 가 있습니다.), 고안텍에가있습다니트스그리▁),다.

저는 텍스트가 세로와 가로 모두 중앙에 정렬되어야 합니다.

는 난시다했을 요.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/ 에는 솔루션이 있습니다."수직 정렬"을 찾습니다.

해킹을 하거나 복잡한 디브를 추가하는 경향이 있기 때문에...저는 보통 단일 셀이 있는 테이블을 사용합니다.가능한 한 간단하게 하기 위해.

2020년 업데이트:

Internet Explorer 10과 같은 이전 브라우저에서 작동할 필요가 없는 경우 flexbox를 사용할 수 있습니다.현재 모든 주요 브라우저에서 광범위하게 지원됩니다.기본적으로 용기는 주축과 교차 축을 따라 중심을 잡고 유연한 용기로 지정해야 합니다.

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

자식에 대해 "가변 항목"이라고 하는 고정 너비를 지정하려면:

#content {
  flex: 0 0 120px;
}

예: http://jsfiddle.net/2woqsef1/1/

컨텐츠를 축소 포장하기 위해서는 훨씬 더 간단합니다. 단지 제거하기만 하면 됩니다.flex: ...플렉스 항목의 라인을 선택하면 자동으로 축소/축소됩니다.

예: http://jsfiddle.net/2woqsef1/2/

위의 예는 MS Edge 및 Internet Explorer 11을 포함한 주요 브라우저에서 테스트되었습니다.

사용자 지정이 필요한 경우 한 가지 기술 참고 사항: 플렉스 항목 내부에서, 이 플렉스 항목은 플렉스 컨테이너 자체가 아니기 때문에, CSS의 오래된 비플렉스 상자 방식은 예상대로 작동합니다.그러나 현재 플렉스 컨테이너에 플렉스 항목을 추가하면 두 플렉스 항목이 수평으로 배치됩니다.수직으로 배치하려면 다음을 추가합니다.flex-direction: column;플렉스 용기에 연결합니다.이것이 유연한 컨테이너와 그 바로 옆의 하위 요소 사이에서 작동하는 방식입니다.

: 센링을수다른방다법같다습니음과은는행터를 하지 않음으로써. 지정하지 않음center컨테이너에 주 및 지정합니다.margin: auto모든 네 방향의 여분의 공간을 차지하는 플렉스 항목 위에 균일하게 분포된 여백은 모든 방향의 중심에 플렉스 항목을 만듭니다.이 기능은 여러 개의 유연한 항목이 있는 경우를 제외하고 작동합니다.또한 이 기술은 MS Edge에서는 작동하지만 Internet Explorer 11에서는 작동하지 않습니다.

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/

한 경우 하지 않고 의 방법과 Internet Explorer 10이 작동하지 않습니다.line-height방법이 통할 것입니다.그렇지 않으면 flexbox가 이 작업을 수행할 수 있습니다.

2014년 기준으로 일반적인 기술:

1 - 접근 1 -transform translateX/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 및 수직센 ▁vertical▁for.justify-content: center수평 센터링용.브라우저 추가 지원을 위해 벤더 접두사를 추가하는 것을 잊지 마십시오(예 참조).
```
html, body, .container {
    height: 100%;
}
.container {
    display: flex;
    align-items: center;
    justify-content: center;
}
```

3 - 접근 3 -table-cell/vertical-align: middle:

예제 여기 / 전체 화면 예제

경우에 따라 다음 사항을 확인해야 합니다.html/body는 요의높이다로설정됨으로 .100%.

정렬의 의 수직정경상요를 합니다.width/height100% 가추를 합니다.display: table 자 는 그다음하요경우의소위런▁the경우▁thendisplaytable-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 - 접근 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 - § 5 - Theline-height방법(최소 유연성 - 권장되지 않음):

여기의 예

경우에 따라 상위 요소의 높이가 고정됩니다.수직 센터링의 경우 다음을 설정하기만 하면 됩니다.line-height부모 요소의 고정 높이와 동일한 자식 요소의 값.

이 솔루션은 경우에 따라 작동하지만 텍스트 줄이 여러 개일 때는 작동하지 않습니다. 이와 같이 주의할 필요가 있습니다.
```
.parent {
    height: 200px;
    width: 400px;
    text-align: center;
}
.parent > .child {
    line-height: 200px;
}
```

방법 4와 5는 가장 신뢰할 수 없습니다.앞의 세 개 중 하나를 선택합니다.

Flexbox/C 사용SS:

<div class="box">
    <p>&#x0D05;</p>
</div>

CSS:

.box{
    display: flex;
    justify-content: center;
    align-items: center;
}

빠른 팁에서 발췌: 요소를 수직 및 수평으로 중앙에 배치하는 가장 간단한 방법

을 합니다.display: table-cell;그 디비에 대한 당신의 CSS 콘텐츠에.

합니다.vertical-align: middle;하지만 당신은 그 정의를 디브에게 줄 수 있습니다.

실시간 예는 다음과 같습니다. 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 */
}

대상 <div>에게 이 CSS 클래스를 지정합니다.

.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>

이를 위해 매우 쉬운 코드를 시도할 수 있습니다.

  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>

코드펜 링크: 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/ 에서 실제로 확인해 보십시오.

2020년 길

.parent{ 
  display: grid;
  place-items: center;
}

당신은 할 수 .flex모재산. div 추니다합을 합니다.margin:auto하위 항목에 대한 속성:

.parent {
    display: flex;
    /* You can change this to `row` if you want the items side by side instead of stacked */
    flex-direction: column;
}

/* Change the `p` tag to what your items child items are */
.parent p {
    margin: auto;
}

▁options다▁you의 더 많은 옵션을 볼 수 .flex여기: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

접근법 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>

상위 div에 다음 코드를 추가합니다.

display: grid;
place-items: center;

사용:

# 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 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>

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello, World!!
</div>

격자무늬

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.box {
    width: 200px;
    height: 100px;
    background: red;
}

<div class="box center">My text</div>

수직 정렬을 가져오도록 선 높이 조정.

line-height: 90px;

이것은 나에게 맞는 정말 간단한 코드야!한 줄만 사용하면 텍스트가 수평으로 중앙에 배치됩니다.

.center-horizontally{
  justify-content: center;
}

<Card.Footer className="card-body-padding center-horizontally">
  <label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>

출력은 다음과 같습니다.

.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%를 중심으로 합니다.

다음 방법을 사용할 수 있습니다.

만약 당신이 한 단어나 한 줄의 문장을 가지고 있다면, 다음 코드가 그 속임수를 쓸 수 있습니다.

div 태그 안에 텍스트를 가지고 ID를 입력합니다.해당 ID에 대해 다음 속성을 정의합니다.
```
id-name {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed red;
}
```
참고: 선 높이 속성이 눈금 높이와 동일한지 확인합니다.

이미지

그러나 내용이 한 단어 또는 한 줄 이상이면 작동하지 않습니다.또한 분할 크기를 px 또는 %로 지정할 수 없는 경우가 있습니다(분할이 정말 작고 내용이 정확히 중간에 있어야 할 경우).
이 문제를 해결하기 위해 다음과 같은 속성 조합을 시도할 수 있습니다.
```
id-name {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px dashed red;
}
```
이미지

이 세 줄의 코드는 디스플레이 크기에 관계없이 눈금의 중간에 내용을 정확하게 설정합니다."align-tems:center"는 수직 중심화에 도움이 되며 "justify-content:center"는 수평 중심화에 도움이 됩니다.

참고: Flex는 일부 브라우저에서 작동하지 않습니다.추가 브라우저 지원을 위해 적절한 공급업체 접두사를 추가해야 합니다.

<!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>

이것이 저에게 가장 좋은 해결책이었습니다.

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%);
}

이것은 저에게 효과가 있었습니다.

.center-stuff{
    text-align: center;
    vertical-align: middle;
    line-height: 230px; /* This should be the div height */
}

스타일 적용:

position: absolute;
top: 50%;
left: 0;
right: 0;

텍스트는 길이에 관계없이 가운데에 배치됩니다.

<!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>

이것이 정답이어야 합니다.가장 깔끔하고 간단한 기능:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

다음 예제를 사용해 보십시오.각 범주에 대한 예제를 추가했습니다: 수평 및 수직

<!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>

언급URL : https://stackoverflow.com/questions/5703552/how-can-i-center-text-horizontally-and-vertically-inside-a-div-block

'source' 카테고리의 다른 글

'Window' 유형은 직접 콘텐츠를 지원하지 않습니다. (0)	2023.05.16
현재 문화와 현재의 차이점은 무엇입니까?의 CultureInfo의 UICulture 속성입니다.NET? (0)	2023.05.16
jQuery 링크 비활성화 (0)	2023.05.16
타이머로 트리거된 Azure 기능을 로컬로 한 번 실행하는 가장 간단한 방법은 무엇입니까? (0)	2023.05.16
.NET에서 'for'와 'for ach' 중 어떤 루프가 더 빨리 실행됩니까? (0)	2023.05.16

현재글div 블록 내에서 텍스트(수평 및 수직)를 중앙에 배치하려면 어떻게 해야 합니까?

각종 프로그래밍 정보를 다루는 블로그입니다.

jQuery, MongoDB, Java, mariadb, reactjs, Git, JavaScript, ASP.NET, WPF, JSON, MySQL, Python, spring-boot, Oracle, Wordpress, Excel, C, angular, angularJS, php,

Today :
Yesterday :

manycodes

div 블록 내에서 텍스트(수평 및 수직)를 중앙에 배치하려면 어떻게 해야 합니까?

div 블록 내에서 텍스트(수평 및 수직)를 중앙에 배치하려면 어떻게 해야 합니까?

2020년 업데이트:

2016/2017년 업데이트:

너비 축소/포장 방법

2014년 기준으로 일반적인 기술:

1 - 접근 1 -`transform` `translateX`/`translateY`:

접근 2 - Flexbox 방법:

3 - 접근 3 -`table-cell`/`vertical-align: middle`:

4 - 접근 4 - 절대위치위치`50%`변위가 있는 위에서부터:

5 - § 5 - The`line-height`방법(최소 유연성 - 권장되지 않음):

접근법 1

접근 2

접근 3

격자무늬

'source' 카테고리의 다른 글

'source'의 다른글

티스토리툴바

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

div 블록 내에서 텍스트(수평 및 수직)를 중앙에 배치하려면 어떻게 해야 합니까?

div 블록 내에서 텍스트(수평 및 수직)를 중앙에 배치하려면 어떻게 해야 합니까?

2020년 업데이트:

2016/2017년 업데이트:

너비 축소/포장 방법

2014년 기준으로 일반적인 기술:

1 - 접근 1 -transform translateX/translateY:

접근 2 - Flexbox 방법:

3 - 접근 3 -table-cell/vertical-align: middle:

4 - 접근 4 - 절대위치위치50%변위가 있는 위에서부터:

5 - § 5 - Theline-height방법(최소 유연성 - 권장되지 않음):

접근법 1

접근 2

접근 3

격자무늬

'source' 카테고리의 다른 글

'source'의 다른글

관련글

티스토리툴바

1 - 접근 1 -`transform` `translateX`/`translateY`:

3 - 접근 3 -`table-cell`/`vertical-align: middle`:

4 - 접근 4 - 절대위치위치`50%`변위가 있는 위에서부터:

5 - § 5 - The`line-height`방법(최소 유연성 - 권장되지 않음):