HTML 텍스트를 가운데로 정렬하는 법은?

Question

HTML에 대해서 공부하는 중인데 HTML 가운데로 정렬 하는 게 너무 어려워요 ㅠㅠ 어떡해 하는건가요 제가 만약 html에서 div이름을 center로 정하고 css 에 가서 그 div를 가운데로 정렬 하려면 어케 해야하나요

슬거운줄나비148 · Answer

https://codepen.io/SteKe/pen/yYLqYEhorizontal center의 경우 위와 같은 방식으로 처리할 수 있을 듯 합니다.vertical center까지 하시려면 제일 간단한 것은 아래 방식입니다.개발하시다보면 속성 및 tag에 따라서 정렬하는 방식이 달라집니다. 알고 계신 방식들을 조금씩 조합하시다보면 자연스럽게 지식이 축척되실 겁니다.ex.html

Foo foo

----------ex.css#outer { width: 100%; display: table;}#inner { width: 50%; height: 100px; margin: 0 auto; text-align: center; display: table-cell; vertical-align: middle;}

경건한개구리7 · Answer

안녕하세요~가운데 정렬

내용

클레스나 id를 줘서 하고싶으시면

내용

이렇게 하시면 될것같습니다~수고하세요

붉은멧돼지50 · Answer

간단하게 아래 처럼 주시면 됩니다.html에서 호출시 div 에 class 매핑

가운데텍스트

css 파일에 class 정의#center { width: 600px; height: 400px; margin:auto; }align 을 떠올리셨을 수 있는데요.테이블에서는 되는데 DIV 영역은 되지 않습니다. ( inline과 block 공부 필요)

유능한텐렉3 · Answer

간단하게 html 상에서 center 태그 사용만으로도 가능합니다.css 내에서 정렬을 주는 방법은 width를 준다거나 margin을 주면 적용 가능합니다.더 다양한 방법은 https://thrillfighter.tistory.com/576 에 많이 있기에 한번 들어가보시는 것을 추천드립니다.

위대한사슴벌레184 · Answer

안녕하세요 현직 개발자입니다.

하시면됩니다.class를 선택하시려면 .center id로 선택하시려면 #center이며 id는 중복되면 안됩니다.

꾸준한물범121 · Answer

안녕하세요.바깥쪽 div에 width를 설정하고 안쪽 div 속성에 width와 margin 속정을 주어 가운데 정렬이 가능합니다.

가운데 정렬 대상

HTML 레이아웃에 대해 학습하고 계시다면 learnlayout.com을 참조하시면 원하시는 정보를 얻으실 수 있습니다.https://ko.learnlayout.com/margin-auto.html

친절한봉고147 · Answer

수평 가운데 정렬은 text-align 옵션을 아래와 같이.center{text-align:center;}수직 가운데 정렬은  아래와 같이 .center{display:table-cell;vertical-align:middle;}속성을 부여하면 됩니다!!도움이 되셨길 바랍니다^^

픽시맨 · Answer

안녕하세요.div의 css에서 width:100vw; text-align:center; 인자를 부여하시면 될 듯 합니다.마찬가지로 세로 가운데 정렬은 height:100vh; vertical-align:middle; 인자를 추가하시면 됩니다.px는 픽셀 고정 너비 높이이고, vw/vh는 화면상 비율입니다.div에서 width:100%는 화면 전체를 커버하지 못합니다.

눈물의 루피 · Answer

.center{width:100%; text-align:center;}로 선언하시어 사용하시면 가운데 정렬이 됩니다.text-align는 정렬을 나타내며center, left, right를 사용하여 정렬을 지정할 수 있습니다text-align 사용 시 width로 정렬이 지정되는 범위를 같이 선언해 주셔야 합니다도움이 되셨길 바랍니다​

유쾌한븍극곰294 · Answer

text 경우

나는 가운데 입니다.

css.center{width:100px;height:100px;text-align:center;}div를 정가운데 배치하고 싶으신 경우

나는 가운데 입니다.

css.box{position:relative;width:500px;height:500px;}.center{position:absolute;width:100px;height:100px;left:50%;top:50%;margin-left:-50px;margin-right:-50px}다른 방식을 원하시는 거면 댓글 남겨주시면 답글 달아드리겠습니다.

솔직한파리5 · Answer

안녕하세요div를 가운데로 정렬시키는 방법은 여러가지가 있지만 경우에 따라서 사용하는 방법이 조금씩 다릅니다 어떤 경우에 사용하실려고 하는 건지 잘 모르겠지만해당 div에 id를 center로 주셨다고 가정하고 해당 요소가 display: block; 속성이라면#center{
  width: 100; // 원하시는만큼 주세요
  margin: 0px auto;
}제일 간단하게 정렬하는 방법이구요 width속성을 주셔야 합니다이게 아니라면#center{      
  position: absolute;
  top : 50%;
  left : 50%:
} 이렇게 적용해보세요답변이 도움이 되었음 합니다

호화로운참매222 · Answer

html이 아래와 같다 가정하고

Text

css를 다음과 같이 작성해보세요.div.center {text-align:center;}만약 div가 가로 100%로 가득 찬 상태에서 보여야 한다면div.center {width:100%;text-align:center;}이렇게 해보세요.text-align 속성은 텍스트의 정렬 방향을 의미합니다.left: 왼쪽 정렬right: 오른쪽 정렬center: 중앙 정렬justify: 양쪽 정렬 (자동 줄바꿈시 오른쪽 경계선 부분 정리)

세심한할미새204 · Answer

html tag 를 가운데로 정렬하는 방법은 수많은 방법이 있습니다만 그중 대표적인 방법을 예로 알려드립니다.html

css 방법 1 .center_wrap .center { width : 100px; margin: 0 auto; }방법 2 .center_wrap { text-align: center; } .center_wrap .center { display : inline-block; width: 100px; } css는 부모의 요소에 큰 영향을 받습니다.방법 1의 경우 자신의 넓이 값이 부모요소의 넓이보다 작은 경우 부모요소 넓이를 기준으로 양옆에 margin 값을 계산하여가운데에 자리하도록 합니다.방법 2의 경우 div의 기본 속성인 block 속성을 inline-block 속성으로 변경하고 부모의 요소에 텍스트 가운데 정렬 속성을 추가합니다.inline-block 의 경우 텍스트와 비슷하게 취급되기 때문에 가운데로 자리하게 됩니다.이 또한 마찬가지로 부모요소의 넓이를 기준으로 계산됩니다.

편안한다람쥐12 · Answer

html 가운데 정렬 방법은 html 문서의 레이아웃을 잡는데 많이 쓰이는데 정말 다양한 방법이 있다. 이 방법들을 모두 알 필요는 없는데 이것은 마치 서울역에서 용산역까지 가는 방법과 마찬가지기 때문이다. 아마 서울역에서 미국까지 갔다가 다시 한국으로 와서 용산역까지 가는 것도 하나의 방법일 수 있기 때문이다.

html 상에서 가운데 정렬을 하는 것은 브라우저를 기준으로 잡던지, 아니면 부모요소를 기준으로 잡던 기준이 되는 요소 내부 공간의 중앙에 표시하는 것이다. 따라서 어떤 방법을 쓰던지 가운데에 위치만 시키면 되기 때문에 다양한 방법이 존재한다.

모든 방법을 다 나열할 수는 없겠지만 그래도 가장 심플하고 최적화된 방법이라 생각되는 것들 몇가지만 정리하려고 한다.

html/css 가운데 정렬

가운데 정렬 방법에는 수평선 상에서 중앙에 정렬하는 방법과 수직선 상에서 중앙에 위치하는 방법, 그리고 수직과 수평선 내에서 모두 중앙 정렬하는 방법이 있다.

수평 정렬은 그냥 단순히 center 태그로 둘러 쌓아주면 되므로 매우 간단하지만 수직 정렬은 까다롭다.

우선 아무런 정렬도 하지 않은 html 문서로 시작하겠다.

컨테이너가 되는 div 태그의 background-color를 노란 색으로 했으며 내부에 2개의 div 태그가 있는 형태다. div 태그는 기본 display:block; 속성이므로 한줄에 하나씩 배치되는 점도 눈여겨 보도록 하자.

수평정렬

아무튼 이 상태에서 center태그를 주는 것 만으로 수평정렬이 가능하다.

가운데 정렬임을 정확히 테스트하기 위해 id가 item인 녀석들의 width를 container의 50%로 만들도록 하겠다.

그런데 center 태그는 내부의 div 태그 내에 있는 텍스트까지 중앙정렬을 시킨다. 이를 없애려면 text-align:left를 해주면 되겠다.

그런데 위 방법은 뭔가 비효율적으로 보인다. 따라서 수평 정렬을 하는데 가장 유명한 방법을 소개하겠다.

margin: 0 auto;

magin : 0 auto 0 auto; 와 동일하며 이 방법은 수평정렬을 하는 가장 간단한 방법이므로 그냥 구문처럼 외워두자.

앞의 코드에서 center 태그를 제거하고 css의 text-align:left;도 제거하자. 그리위 위 코드를 내부 div에 적용해보자.

단, 이 방법에서 주의할 점은 중앙 정렬할 요소의 width 값을 적절하게 조절해 줘야 한다는 것이다.

결과는 이전과 동일하다.

만약 여기에서 내부 텍스트를 정렬하고 싶다면 그때가서 text-align 속성을 주면 될 것이다.

position, transform 속성 사용하기

CSS의 transform 속성은 요소의 위치를 변경하는데 1차원 이동, 2차원 이동, 3차원 이동까지 가능하다. 이동 방법은 행렬을 통한 변환이라고 생각하면 되는데 여기에서는 1차원 이동을 하므로 깊은 설명은 생략한다.

이 속성은 단순히 위치를 옮긴는 것이므로 생각보다 간단하다. 하지만 이 속성을 쓰기전에 사전 조건이 있는데 transform속성을 사용하려는 요소는 position 속성이 relative가 되어야 한다. (참고 : 모든 요소의 position 속성은 static이 기본이다.)

이렇게 position 속성을 relative로 주면 top, left, right, bottom 속성으로 자신의 원래(현재) 위치로 부터 상대적인 위치를 지정할 수 있다. left:10px;이라고 하면 자신의 원래(현재)위치에서 오른쪽으로 10px만큼 이동한다. 전달값을 %로 할 때 100%를 자신의 부모의 가로 또는 세로 길이가 된다. 따라서 위 코드는 부모 요소의 가로 너비의 절반만큼 오른쪽으로 이동하라는 뜻이다.

그런데 이동 결과를 보면 정 중앙이 아니고 왼쪽 위 모서리가 정중앙에 위치한다. 왼쪽 위 모서리가 아닌 자신의 가로 너비의 중앙 지점이 중앙으로 와야 하므로 transform 속성으로 다음과 같이 왼쪽으로(-x축 방향) 이동시키도록 한다.

이 상태에서 transform : translateY( ) 속성을 사용하여 열 방향으로 중앙정렬도 가능하다. 이 부분은 직접 해보길 바란다. 주의할 점은 요소의 개수에 따라서 translateY(?)에 들어가는 수치가 달라지게 된다는 것이다.

수직정렬 연속배치

그런데 어떤 경우는 "안녕"과 "만나서 반가워"를 같은 줄에 연속으로 배치시키길 원할 수도 있다. 이런 경우 가운데 정렬은 수평정렬은 큰 의미없고 수직정렬을 해야 한다.

우선 div 요소를 같은 줄에 배치시키는 방법은 display:block; 속성을 없애는 것과 float 속성을 주는 방법이 있다. 우선 display : inline; 또는 display : inline:block;을 주는 방법은 다음과 같이 요소간에 알수없는 간격이 생긴다는 단점?이 있다.

inline-block 으로 해도 마찬가지다. 차이점은 inline 속성은 width, height 속성이 없기 때문에 위와 같이 width 속성이 적용되지 않는 것이다.

따라서 float 속성을 사용해보기로 해보겠다.

이 상태에서 수직 정렬을 해보도록 하겠다.

앞에서 배운 transform을 이용하면 되는데 방법은 동일하다.

수평, 수직 가운데 정렬 동시에 하기

사실 transform을 사용해서 수평, 수직 두 방향을 동시에 중앙 정렬하기에는 까다로운 구석이 있다. 위 예에서 수평 중앙 정렬을 추가해 보고 요소의 개수를 하나씩 늘려보면 왜 까다로운지 알 수 있을 것이다.

그래서 필자가 사용하는 방법을 소개한다. 이 방법은 flex를 사용하는 방법인데 브라우저에 따라서 표시가 달라보일 수 있으니 확인하도록 하자. 필자의 경우는 큰 문제는 없었다.

정렬시킬 요소을 감싸는 부모를 하나 더 만들어 그룹으로 만든 후에 flex를 사용하여 가로 세로 중앙 정렬을 한 것이다.(flex 대신 앞에서 설명한 transform 속성을 사용할 수도 있음.)

이 때 내부 요소에 float 속성을 주면 한 줄로 배치시킬 수도 있다.

html 가운데 정렬을 하는 방법은 워낙 다양해서 소스해석을 위해서라도 눈여겨 볼 필요가 있다.

생활꿀팁

생활꿀팁

HTML 텍스트를 가운데로 정렬하는 법은?