[html]CSS로 텍스트를 수직으로 센터하는 방법은 무엇입니까?[복제하다]

IT / / 2022. 4. 13. 13:38
반응형

CSS로 텍스트를 수직으로 센터하는 방법은 무엇입니까?[복제하다]

질문

 

텍스트가 포함 된

요소가 있고이
세로 센터의 내용을 정렬하고 싶습니다.

여기 내

스타일이 있습니다.

#상자 { 높이 : 170px; 너비 : 270px; 배경 : # 000; 글꼴 크기 : 48px; 색상 : #fff; 텍스트 - 정렬 : 센터; }

Lorem Ipsum Dolor Sit.

이 목표를 달성하는 가장 좋은 방법은 무엇입니까?

답변

 

이 기본 접근 방식을 시도 할 수 있습니다.

div { 높이 : 100px; 선 - 높이 : 100px; 텍스트 - 정렬 : 센터; 테두리 : 2PX 점선 # F69C55; }

안녕하세요!

우리가 라인의 높이를 포함 된 상자 요소와 동일한 높이로 설정하기 때문에 단일 텍스트에만 작동합니다.

더 다재다능한 접근법

이것은 텍스트를 수직으로 정렬하는 또 다른 방법입니다.이 솔루션은 한 줄과 여러 줄의 텍스트에 대해 작동하지만 여전히 고정 된 높이 컨테이너가 필요합니다.

div { 높이 : 100px; 선 - 높이 : 100px; 텍스트 - 정렬 : 센터; 테두리 : 2PX 점선 # F69C55; } 기간 { 디스플레이 : 인라인 블록; 수직 정렬 : 중간; 선 - 높이 : 정상; }

안녕하세요 세계!

CSS는

, 수직 센터가
의 선 높이를 높이와 동일하게 설정하여 을 정렬하고 을 in meriver-align : 중간으로 만듭니다.그런 다음 에 대해 선 높이를 정상으로 다시 설정하므로 해당 내용이 블록 내부에서 자연스럽게 흐를 것입니다.

테이블 디스플레이를 시뮬레이션합니다

다음은 디스플레이를 지원하지 않는 구형 브라우저에서 작동하지 않을 수있는 또 다른 옵션입니다. 표 및 디스플레이 : 테이블 셀 (기본적으로 Internet Explorer 7).CSS를 사용하여 테이블 동작을 시뮬레이션합니다 (테이블은 수직 정렬을 지원하므로 HTML이 두 번째 예제와 동일합니다.

div { 디스플레이 : 표; 높이 : 100px; 너비 : 100 %; 텍스트 - 정렬 : 센터; 테두리 : 2PX 점선 # F69C55; } 기간 { 디스플레이 : 표 - 셀; 수직 정렬 : 중간; }

안녕하세요 세계!

절대 위치 지정을 사용합니다

이 기술은 절대적으로 배치 된 요소 설정 상단, 하단, 왼쪽 및 오른쪽 0을 사용합니다. 그것은 CSS에서 매거진, 절대 수평 및 수직을 중심으로하는 물품에 더 자세히 설명되어 있습니다.

div { 디스플레이 : 플렉스; 정당화 내용 : 센터; 정렬 항목 : 센터; 높이 : 100px; 너비 : 100 %; 테두리 : 2PX 점선 # F69C55; }

안녕하세요 세계!

답변

또 다른 방법 (아직 언급되지 않은)은 FlexBox와 함께합니다.

컨테이너 요소에 다음 코드를 추가하십시오.

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

FlexBox 데모 1.

.상자 { 높이 : 150px; 너비 : 400px; 배경 : # 000; 글꼴 크기 : 24px; 글꼴 스타일 : 경사; 색상 : #fff; 텍스트 - 정렬 : 센터; 패딩 : 0 20px; 마진 : 20px; 디스플레이 : 플렉스; 정당화 내용 : 센터; / * 가로 정렬 * / 정렬 항목 : 센터; / * 수직 정렬 * / }

> Lorem Ipsum Dolor 앉아 amet, consectetuer 지방 엘리트, sed diven nonummy nibh

또는 컨테이너를 통해 컨텐츠를 정렬하는 대신 FlexBox는 플렉스 컨테이너 (위의 질문에 주어진 예제와 같이)에 하나의 FLEX-ITEL이있을 때 자동 여백이있는 FLEX 항목을 가운데에 두십시오.

따라서 플렉스 항목을 가로로하고 수직으로 가운데로 가운데 마진으로 설정하십시오. 자동

FlexBox 데모 2.

.상자 { 높이 : 150px; 너비 : 400px; 배경 : # 000; 글꼴 크기 : 24px; 글꼴 스타일 : 경사; 색상 : #fff; 텍스트 - 정렬 : 센터; 패딩 : 0 20px; 마진 : 20px; 디스플레이 : 플렉스; } .BOX SPAN { 마진 : 자동; }

> MARGIN : FLEX 항목의 자동은 수평 및 수직으로 을 중심으로합니다.

NB : 위의 모든 것은 가로 행에 배치되는 동안 중심 항목에 적용됩니다.기본적으로 Flex-Direction의 값은 행이기 때문에 기본 동작이기도합니다.그러나 플렉스 항목을 수직 컬럼에 배치 해야하는 경우, Flex-Direction : 메인 축을 열로 설정하여 주축을 설정하여 정당화 내용 및 정렬 항목 속성을 추가로 설정하려면 컨테이너에 설정해야합니다.정당화 내용으로 주변의 길 : 센터를 수직으로 센터링하고 정렬 : 가로 센터 센터 센터

플렉스 방향 : 컬럼 데모

.상자 { 높이 : 150px; 너비 : 400px; 배경 : # 000; 글꼴 크기 : 18px; 글꼴 스타일 : 경사; 색상 : #fff; 디스플레이 : 플렉스; 플렉스 방향 : 컬럼; 정당화 내용 : 센터; / * 항목을 수직으로 정렬 * / 정렬 항목 : 센터; / * 가로로 항목 정렬 * / } p { 마진 : 5px; }

>

플렉스 방향이 열이면 ...

"정당화 내용 : 센터"- 수직으로 정렬

"정렬 항목 : 중심"- 가로 정렬

최대 브라우저 지원을위한 구문을 볼 수 있도록 FlexBox로 시작하는 좋은 장소는 FlexyBoxes입니다.

또한 요즘 브라우저 지원은 매우 좋습니다 : Caniuse

디스플레이에 대한 브라우저 크로스 호환성 : Flex 및 Align-Items, 다음을 사용할 수 있습니다.

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;

답변

다음 CSS 코드를 추가하여 쉽게 작업 할 수 있습니다.

display: table-cell;
vertical-align: middle;

즉, 귀하의 CSS가 마침내 다음과 같이 보입니다.

#상자 { 높이 : 90px; 너비 : 270px; 배경 : # 000; 글꼴 크기 : 48px; 글꼴 스타일 : 경사; 색상 : #fff; 텍스트 - 정렬 : 센터; 마진 탑 : 20px; 마진 왼쪽 : 5px; 디스플레이 : 표 - 셀; 수직 정렬 : 중간; }

일부 텍스트

답변

참조를 위해 단순한 답변을 추가하려면 다음을 수행하십시오.

순수한 CSS :

.vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

또는 SASS / SCSS MIXIN으로 :

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

사용 :

.class-to-center {
    @include vertical-align;
}

Sebastian Ekström의 블로그 게시물 수직은 3 줄의 CSS로 아무 것도 정렬합니다.

이 방법은 요소가 "절반 픽셀"에 배치되는 요소로 인해 요소가 흐릿해질 수 있습니다.이를위한 솔루션은 상위 요소를 보존하도록 설정하는 것입니다.다음과 같습니다 :

.parent-element {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

우리는 2015 년 이상에 살고 있으며 모든 주요 현대 브라우저에서 지원됩니다.

웹 사이트가 여기에서 이루어지는 방식이 될 것입니다.

그것을 배우십시오!

답변

모든 신용은이 링크 주인 @sebastian ekström 링크로 이동합니다.이것을 통해 가십시오.조치 코드 팩에서 참조하십시오.위의 기사를 읽음으로써 나는 또한 데모 바이올린을 만들었습니다.

우리는 변환의 도움으로 그것을 할 수 있습니다. 우리가 그 높이는 그 높이를 모르는 경우에도 우리가 원하는대로 변환의 도움으로 할 수 있습니다.

CSS 속성 변환은 일반적으로 회전 및 스케일링 요소에 사용되지만 번역 기능을 사용하면 이제 요소를 수직으로 정렬 할 수 있습니다.일반적으로 이것은 절대 위치 결정 또는 설정 라인 높이로 이루어져야하지만 요소의 높이를 알고 있거나 단일 줄 텍스트에서만 작동해야합니다.

그래서, 이것을하기 위해서는 다음을 씁니다.

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

그것은 당신이 필요로하는 전부입니다.이것은 절대 위치 방법에 비슷한 기술이지만 상위의 요소 또는 위치 - 속성에 대해 높이를 설정할 필요가없는 위쪽이있는 것입니다.Internet Explorer 9에서도 Box에서 똑바로 작동합니다!

더 간단하게 만들려면 공급 업체 접두사가있는 믹스로 작성할 수 있습니다.

답변

CSS3 Flexboxes가있는 작은 마술이 있습니다.

/* 중요한 */ 부분 { 디스플레이 : 플렉스; 디스플레이 : -webkit-flex; } 섹션 P { / * 키 부분 * / 마진 : 자동; } / * 중요하지 않은, 착색 및 UI * / 부분 { 높이 : 200px; 너비 : 60 %; 마진 : 자동; 국경 반경 : 20px; 테두리 : 3px 단단한 오렌지; 배경색 : 금; } 섹션 P { 텍스트 - 정렬 : 센터; 글꼴 - 가족 : Cantarell, Calibri; 글꼴 크기 : 15px; 배경색 : 노란색; 국경 반경 : 20px; 패딩 : 15px; } <섹션>

나는 중심 상자입니다!
Flexboxes는 훌륭합니다!

팁 : 텍스트를 가운데 센터 중앙에서 "키 부분"으로 표시된 위의 줄을 "키 부분"으로 바꾸십시오.

  1. Only vertically:

    margin: auto 0;

  2. Only horizontally:

    margin: 0 auto;

내가 알아 차리면,이 트릭은 그리드 (즉, 디스플레이 : 그리드)와 함께 작동합니다.

출처:https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css
반응형
IT 관련 글
글 더보기

티스토리툴바