div 안에 내용 정렬

152

CSS 스타일의 텍스트 정렬을 사용하여 HTML 컨테이너의 내용을 정렬합니다. 내용이 텍스트이거나 브라우저가 IE 인 경우에는 제대로 작동합니다. 그러나 그렇지 않으면 작동하지 않습니다.

또한 이름에서 알 수 있듯이 기본적으로 텍스트를 정렬하는 데 사용됩니다. align 속성은 오랫동안 사용되지 않습니다.

html로 내용을 정렬하는 다른 방법이 있습니까?

html css text-align

— 허만 슈 보작
소스

더 많은 정보를 알려주시겠습니까? 다른 브라우저에서 작동하지 않는 코드를 지나갔습니다.

— Shoban

사람들이 내가하려는 일을 알 수 있도록 마크 업의 예를 제시해야합니다. 그렇지 않으면 질문이 모호합니다.

— levik

216

text-align은 텍스트와 기타 인라인 내용을 정렬합니다. 블록 요소 자식을 정렬하지 않습니다.

이렇게하려면 '자동'왼쪽 및 오른쪽 여백을 사용하여 원하는 요소에 너비를 지정하십시오. 이것은 IE5.x를 제외한 모든 곳에서 작동하는 표준 호환 방식입니다.

<div style="width: 50%; margin: 0 auto;">Hello</div>

이것이 IE6에서 작동하려면 적절한 DOCTYPE을 사용하여 표준 모드 가 켜져 있는지 확인해야합니다 .

요즘 실제로는 안되는 IE5 / Quirks 모드를 지원해야하는 경우 센터링에 대한 두 가지 접근 방식을 결합 할 수 있습니다.

<div style="text-align: center">
    <div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>

(스타일은 스타일 시트에 넣는 것이 가장 좋지만 인라인 버전은 예시입니다.)

— 보 빈스
소스

2

자주의 경우 사업부의 폭을 알 수없는 경우,이 솔루션은 모든 브라우저에서 완벽하게 작동합니다 : matthewjamestaylor.com/blog/...

— 아르 템 Russakovskii

<div style = "width : 100 %; margin : 0 auto;"> Hello </ div>를 사용했습니다

— Aamol

9

다음과 같이 할 수도 있습니다.

HTML

<body>
    <div id="wrapper_1">
        <div id="container_1"></div>
    </div>
</body>

CSS

body { width: 100%; margin: 0; padding: 0; overflow: hidden; }

#wrapper_1 { clear: left; float: left; position: relative; left: 50%; }

#container_1 { display: block; float: left; position: relative; right: 50%; }

으로 아르 템 Russakovskii는 또한 언급에 의해 원래의 기사 읽어 매튜 제임스 테일러 전체 설명을.

— 마흐디
소스

9

<div class="content">Hello</div>

.content {
    margin-top:auto;
    margin-bottom:auto;
    text-align:center;
}

— 크리 티 k
소스

1

이 코드 스 니펫은 문제를 해결할 수 있지만 설명을 포함하면 게시물의 품질을 향상시키는 데 실제로 도움이됩니다. 앞으로 독자들에게 질문에 대한 답변을 제공하므로 해당 사람들이 코드 제안의 이유를 모를 수도 있습니다.

— andreas

죄송합니다. 위의 코드는 부모 콘텐츠에 div 센터를 정렬합니다

— krithi k

6

솔직히, 나는 지금까지 본 모든 솔루션을 싫어하고 이유를 알려줄 것입니다 : 그들은 정확히 맞지 않는 것처럼 보입니다 ... 그래서 여기 내가 일반적으로하는 일이 있습니다.

각 div와 해당 여백이 보유하는 픽셀 값을 알고 있으므로 다음을 수행하십시오.

절대 위치와 왼쪽 값이 50 % 인 래퍼 div를 만들 것입니다 ...이 div는 이제 화면 중간에서 시작한 다음 div 너비의 모든 내용의 절반을 뺍니다 ... 콘텐츠를 아름답게 확장하고 모든 브라우저에서 작동한다고 생각합니다. 직접 시도해보십시오 (이 예제에서는 사이트의 모든 컨텐츠가이 랩퍼 클래스를 사용하는 div 태그로 랩핑되고 그 안의 모든 컨텐츠가 너비가 200px라고 가정합니다).

.wrapper {
    position: absolute;
    left: 50%;
    margin-left: -100px;
}

편집 : 추가하는 것을 잊었습니다 ... 너비를 설정하고 싶을 수도 있습니다 : 0px; 이 랩퍼 div에서 일부 브라우저는 스크롤 막대를 표시하지 않으며 모든 내부 div에 절대 위치를 사용할 수 있습니다.

이것은 top : 50 % 및 margin-top을 사용하여 콘텐츠를 세로로 정렬하는 데에도 효과적입니다. 건배!

— 알렉산드 루
소스

2

내가 사용하는 기술은 다음과 같습니다.

<div>
    <div style="display: table-cell; width: 100%">&nbsp;</div>
    <div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>

스 니펫 확장

— 집요한 추적자
소스

2

아래는 항상 나를 위해 일한 방법입니다

플렉스 레이아웃 모델을 사용하여 :

부모 div의 표시를 설정하고 (주축에 항목을 정렬) 및 (십자선에 항목을 정렬 )을 display: flex;사용하여 div 안에 자식 요소를 정렬 할 수 있습니다 .justify-content: center;align-items: center;

자식 요소가 두 개 이상 있고 배열 방식 (열 / 행)을 제어하려는 경우 flex-direction속성 을 추가 할 수도 있습니다 .

작업 예 :

.parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  height: 250px;
  width: 250px;
}

.child {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

<div class="parent">
  <div class="child"></div>
</div>

스 니펫 확장

2. (이전 방법) 위치, 여백 속성 및 고정 크기 사용

작업 예 :

.parent {
  border: 1px solid black;
  height: 250px;
  position: relative;
  width: 250px;
}

.child {
  border: 1px solid black;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  position: absolute;
  width: 50px;
}

<div class="parent">
  <div class="child"></div>
</div>

스 니펫 확장

— nmak18
소스

1

모든 대답은 가로 정렬에 대해 말합니다.

여러 콘텐츠 요소를 세로로 정렬하려면 다음 방법을 살펴보십시오.

<div style="display: flex; align-items: center; width: 200px; height: 140px; padding: 10px 40px; border: solid 1px black;">
    <div>
        <p>Paragraph #1</p>
        <p>Paragraph #2</p>
    </div>
</div>

스 니펫 확장

— 니콜라스
소스

-2

HTML과 CSS를 사용한 또 다른 예 :

<div style="width: Auto; margin: 0 auto;">Hello</div>

— 디오고
소스

27

작성한 내용 중 ASP.NET에만 해당되는 것은 없습니다. 그것은 단지 HTML과 인라인 CSS입니다. 속성으로 서버 컨트롤을 작성하려고 했습니까?

— webworm September

1

결정된. 정답은 이제 올바른 기술을 언급합니다.

— jony