HTML에서 div 센터를 정렬하는 방법
중복 가능성 :
div를 수평으로 중앙에 배치하는 방법은 무엇입니까?
HTML 중심에 객체를 만드는 간단한 방법 중 하나는를 사용하는 align='center'것이지만 div에서는 작동하지 않습니다.
나는 시도했다 :
style='text-align:center';
style='left:50%';
나는 심지어 센터 태그를 진실
<center>
하지만 타겟 div를 중앙으로 만들 수 없습니다.
<!DOCTYPE html>
<html>
<head>
<title>Center</title>
</head>
<body>
<div style="text-align: center;">
<div style="width: 500px; margin: 0 auto; background: #000; color: #fff;">This DIV is centered</div>
</div>
</body>
</html>IE, Firefox, Chrome, Safari 및 Opera에서 테스트 및 작업했습니다. IE6를 테스트하지 않았습니다. IE의 경우 외부 텍스트 정렬이 필요합니다. 다른 브라우저 (및 IE9?)는 DIV 여백 (왼쪽 및 오른쪽) 값을 auto로 지정하면 작동합니다. 여백 "0 auto"는 여백 "0 auto 0 auto"(오른쪽 상단 왼쪽 하단)의 약자입니다.
참고 : 텍스트는 내부 DIV 내부의 중앙에도 배치됩니다. 왼쪽에 유지하려면 text-align : left; 내부 DIV.
편집 : 표준 모드에서 실행되는 IE 6, 7, 8 및 9는 여백이 자동으로 설정된 상태에서 작동합니다.
나는 align="center"내용 이 정렬 된다고 생각 하므로 그 방법을 사용하려면 'wraper'div-나머지를 감싸는 div에서 사용해야합니다.
text-align 비슷한 일을하고 있습니다.
left:50% div의 위치를 상대 또는 절대 위치로 설정하지 않는 한 무시됩니다.
일반적으로 허용되는 방법은 다음 속성을 사용하는 것입니다.
width:500px; // this can be what ever unit you want, you just have to define it
margin-left:auto;
margin-right:auto;
여백이 자동이라는 것은 브라우저 창 (또는 상위 div)에 맞게 확장 / 축소됨을 의미합니다.
최신 정보
이것을 풀어 준 Meo에게 감사합니다. 원한다면 시간을 절약하고 마진에 짧은 손 속성을 사용할 수 있습니다.
margin:0 auto;
이것은 위쪽과 아래쪽을 0으로 정의하고 (0이므로 단위 부족에 대해서는 중요하지 않습니다) 왼쪽과 오른쪽은 '자동'으로 정의됩니다. 그러면 재정의하지 않으려면 위쪽 여백을 원하는대로 말할 수 있습니다. 다른 CSS 규칙과 함께.
div가 위치에 있는지 여부에 따라 다릅니다 : 절대 / 고정 또는 상대 / 정적
위치 : 절대 및 고정
<div style="position: absolute; /*or fixed*/; width: 50%; height: 300px; left: 50%; top:100px; margin: 0 0 0 -25%">blblablbalba</div>
여기서 비결은 물체 너비의 절반에 음의 여백을 두는 것입니다.
위치 : 상대 및 정적
<div style="position: relative; /*or static*/; width: 50%; height: 300px; margin: 0 auto">blblablbalba</div>
두 기술 모두 너비를 설정해야합니다.
이 선을 따라 뭔가 어때
<style type="text/css">
#container {
margin: 0 auto;
text-align: center; /* for IE */
}
#yourdiv {
width: 400px;
border: 1px solid #000;
}
</style>
....
<div id="container">
<div id="yourdiv">
weee
</div>
</div>
참고 URL : https://stackoverflow.com/questions/2691178/how-to-make-a-div-center-align-in-html
'developer tip' 카테고리의 다른 글
| Visual Studio 2010의 CSS 3.0 (0) | 2020.11.12 |
|---|---|
| Keras, 모델을 훈련시킨 후 어떻게 예측합니까? (0) | 2020.11.12 |
| 엔터티 프레임 워크 코드 우선-프로덕션 데이터베이스에 대해 Update-Database를 실행하는 방법 (0) | 2020.11.12 |
| 부모의 componentDidMount가 자식의 모든 componentDidMount 후에 호출됩니까? (0) | 2020.11.12 |
| git은 Unpacking Objects 단계에서 멈춤 (0) | 2020.11.12 |