div 안에 내용 정렬
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%"> </div>
<div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>모든 대답은 가로 정렬에 대해 말합니다.
For vertical aligning multiple content elements, take a look at this approach:
<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>Below are the methods which have always worked for me
- By using flex layout model:
Set the display of the parent div to display: flex; and the you can align the child elements inside the div using the justify-content: center; (to align the items on main axis) and align-items: center; (to align the items on cross axis).
If you have more than one child element and want to control the way they are arranged (column/rows), then you can also add flex-direction property.
Working example:
.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. (older method) Using position, margin properties and fixed size
Working example:
.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>Just another example using HTML and CSS:
<div style="width: Auto; margin: 0 auto;">Hello</div>
참고URL : https://stackoverflow.com/questions/684634/align-contents-inside-a-div
'development' 카테고리의 다른 글
| Junit의리스트에 대한 주장 (0) | 2020.06.18 |
|---|---|
| StringComparison.OrdinalIgnoreCase 또는 StringComparison.InvariantCultureIgnoreCase는 일반적으로 가장 적합한 방법은 무엇입니까? (0) | 2020.06.18 |
| Python Argparse : 기본값 또는 지정된 값 (0) | 2020.06.18 |
| FileInputStream을 사용할 때 이상적인 버퍼 크기를 어떻게 결정합니까? (0) | 2020.06.18 |
| 프로그래밍 방식으로 아이폰의 MAC 주소를 얻는 방법 (0) | 2020.06.18 |