div 내부의 내용을 정렬합니다

StackOverflow https://stackoverflow.com/questions/684634

  •  22-08-2019
  •  | 
  •  

문제

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

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

HTML에서 내용을 정렬하는 다른 방법이 있습니까?

도움이 되었습니까?

해결책

텍스트-정렬은 텍스트 및 기타 인라인 컨텐츠를 정렬합니다. 블록 요소 어린이를 정렬하지 않습니다.

그렇게하려면 '자동'왼쪽 및 오른쪽 여백과 너비를 정렬하려는 요소를 제공하고 싶습니다. 이것은 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%; }

처럼 Artem Russakovskii 언급 한, 원본 기사를 읽으십시오 Mattew James Taylor 전체 설명을 위해.

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

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

솔직히, 나는 지금까지 본 모든 솔루션을 싫어하고, 왜 그런지 말해 줄 것입니다.

나는 각 div와 각각의 마진이 어떤 픽셀을 값으로 평가하는지 알고 있습니다. 그래서 나는 다음을 수행합니다.

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

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

편집 : 추가하는 것을 잊었습니다 ... 너희는 또한 너비를 설정하고 싶을 수도 있습니다 : 0px; 일부 브라우저가 스크롤 바를 표시하지 않으려면이 래퍼 디브에서 모든 내부 DIV에 절대 포지셔닝을 사용할 수 있습니다.

이것은 또한 컨텐츠를 수직으로 정렬하고 상위 : 50% 및 마진 탑을 사용하는 데 놀랍습니다. 건배!

다음은 제가 잘 작동하는 기술입니다.

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

HTML 및 CSS를 사용하는 또 다른 예 :

<div style="width: Auto; margin: 0 auto;">Hello</div>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top