div 내부의 내용 정렬
HTML에서 컨테이너 내부의 내용을 정렬하기 위해 css style text-align을 사용합니다. 이것은 내용이 텍스트이거나 브라우저가 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>
(분명히 스타일시트 안에 스타일을 넣는 것이 가장 좋지만 인라인 버전은 예시적입니다.)
<div class="content">Hello</div>
.content {
margin-top:auto;
margin-bottom:auto;
text-align:center;
}
아래는 저에게 항상 효과가 있었던 방법들입니다.
- 플렉스 레이아웃 모델 사용:
상위 div의 표시를 다음으로 설정합니다.display: flex;그리고 당신은 div를 사용하여 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>(구법) 위치, 여백 특성 및 고정 크기 사용
작업 예제:
.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>다음과 같이 수행할 수도 있습니다.
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 Rusakovski도 언급했듯이, 자세한 설명은 Mattew James Taylor의 원본 기사를 읽으십시오.
솔직히 지금까지 본 모든 솔루션이 싫습니다. 그 이유는 다음과 같습니다.그들은 제대로 정렬하지 않는 것 같아요...그래서 제가 주로 하는 일은 다음과 같습니다.
각 div와 각 마진이 어떤 픽셀 값을 가지고 있는지 알고 있습니다.그래서 저는 다음과 같이 합니다.
절대 위치와 왼쪽 값이 50%인 래퍼 디브를 만들 것입니다...이제 이 디브는 화면 중앙에서 시작해서 디브 너비의 절반을 빼면 됩니다.컨텐츠를 아름답게 확장할 수 있습니다.그리고 이것은 모든 브라우저에서도 작동한다고 생각합니다.직접 시도해 보십시오(이 예에서는 사이트의 모든 콘텐츠가 이 래퍼 클래스를 사용하는 div 태그로 포장되어 있고 모든 콘텐츠의 너비가 200px라고 가정합니다).
.wrapper {
position: absolute;
left: 50%;
margin-left: -100px;
}
편집: 추가하는 것을 잊었습니다...또한 너비를 0도로 설정할 수 있습니다. 일부 브라우저의 경우 이 래퍼 div에서 스크롤 막대를 표시하지 않고 모든 내부 div에 대해 절대 위치 지정을 사용할 수 있습니다.
이는 또한 상위: 50% 및 마진 상위를 사용하여 컨텐츠를 수직으로 정렬하는 데도 놀라운 효과를 발휘합니다.건배!
다음은 제가 사용하는 잘 작동하는 기술입니다.
<div>
<div style="display: table-cell; width: 100%"> </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>
언급URL : https://stackoverflow.com/questions/684634/align-contents-inside-a-div
'programing' 카테고리의 다른 글
| App_Code에 저장된 Unit Testing ASP.net 웹사이트 프로젝트 코드 (0) | 2023.08.25 |
|---|---|
| phpinfo()는 MySQL을 나타내고, PMA는 마리아를 나타냅니다.DB (0) | 2023.08.25 |
| Spring Boot Application - 모든 rest API 끝점에 대한 기본 시간 초과 또는 모든 끝점 시간 초과를 제어하기 위한 쉬운 구성 (0) | 2023.08.25 |
| telerik asp.net mvc 그리드에 매개 변수 전달 (0) | 2023.08.25 |
| 단순 getColumnName(0) 호출이 잘못된 열 인덱스를 던집니다. getValidColumnIndex (0) | 2023.08.25 |