div 안에 내용 정렬 브라우저가 IE 인 경우에는 제대로

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

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

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

답변

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>

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

답변

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

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는 또한 언급에 의해 원래의 기사 읽어 매튜 제임스 테일러 전체 설명을.

답변

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

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

답변

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

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

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

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

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

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

답변

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

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

답변

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

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

부모 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>
스 니펫 확장

답변

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

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

<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>
스 니펫 확장