다른 디브에 디브 센터를 지정하려면 어떻게 해야 합니까?
제 생각에는.#container안에 중심을 둘 것입니다.#main_content 그러나 그렇지 않습니다.왜 이렇게 안 되고, 어떻게 고칠 수 있을까요?
#main_content {
top: 160px;
left: 160px;
width: 800px;
min-height: 500px;
height: auto;
background-color: #2185C5;
position: relative;
}
#container {
width: auto;
height: auto;
margin: 0 auto;
padding: 10px;
position: relative;
}<div id="main_content">
<div id="container">
</div>
</div>당신은 당신이 설정할 필요가 있습니다.width용기()의auto작동 안 함):
#container {
width: 640px; /* Can be in percentage also. */
height: auto;
margin: 0 auto;
padding: 10px;
position: relative;
}
MDN에 의한 CSS 레퍼런스는 이 모든 것을 설명합니다.
다음 링크를 확인합니다.
jsFiddle에서 활동중입니다.
엄밀히 말하면, 당신의 내부 DIV(#container)의 중심을 수평으로 맞춥니다.당신이 알 수 없는 이유는 CSS로width: auto내부 DIV가 상위 너비와 동일한 너비로 확장되는 속성입니다.
이 fiddle 참조: http://jsfiddle.net/UZ4AE/
#container {
width: 50px;
height: auto;
margin: 0 auto;
padding: 10px;
position: relative;
background-color: red;
}
이 예제에서는 단순히 다음의 너비를 설정합니다.#container.50px배경을 다음으로 설정합니다.red중심에 있음을 알 수 있습니다.
진짜 질문은 "어떻게 CSS로 요소를 수평으로 중심을 잡을 수 있을까?"라고 생각합니다. 그리고 답은 (드럼 롤 부탁드립니다): 달라요!
W3Schools가 CSS를 잘 활용할 경우 CSS로 센터를 구성할 수 있는 수많은 방법을 완전히 재탕하지는 않을 것입니다. http://www.w3schools.com/css/css_align.asp 하지만 기본적인 아이디어는 블록 레벨 요소의 경우 원하는 너비를 지정하고 좌우 여백을 다음과 같이 설정하는 것입니다.auto.
.center {
margin-left: auto;
margin-right: auto;
width: 50px;
}
참고:이 답변은 블록 레벨 요소에만 적용됩니다!인라인 요소의 위치를 지정하려면text-align: center첫 번째 블록 부모의 속성입니다.
또 다른 흥미로운 방법: fiddle
CSS
.container {
background: yellow;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.centered-div {
width: 80%;
height: 190px;
margin: 10px;
padding: 5px;
background: blue;
color: white;
}
HTML
<div class="container">
<div class="centered-div">
<b>Enjoy</b>
</div>
</div>
이 작은 코드로 플로트 디브의 중심을 잡을 수 있습니다.
#div {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -100px;
}
이제 당신의 것을(를)
#main_content text-align:center그리고 당신의 것을 정의합니다. #container display:inline-block;
이와 같이
#main_content {
text-align: center;
}
#container{
display: inline-block;
vertical-align: top;
}
추가 시도
text-align: center;
당신의 부모 컨테이너 CSS 선언에.자식 컨테이너에는 다음 내용이 포함됩니다.
display: inline-block;
효과가 있을 겁니다.
사용하다margin:0 auto;아역배우에게.그런 다음 자식 디브를 부모 디브 안에 중심을 맞출 수 있습니다.
그것은 효과가 있을 것입니다.#container div width:80%(주 내용보다 폭이 작고, 좌우 모두 잘 관리할 수 있도록 %를 부여한 경우) 및 부여margin:0px auto; 아니면 margin:0 auto;(둘 다 정상 작동).
우선 좀 더 구체적인 폭을 정의해 보겠습니다.이미 전체 폭에 걸쳐 있는 것의 중심을 잡는 것은 어렵습니다.
#container {
width: 400px;
}
저는 몇몇 프로젝트에서 다음과 같은 방법을 사용했습니다.
https://jsfiddle.net/u3Ln0hm4/
.cellcenterparent{
width: 100%;
height: 100%;
display: table;
}
.cellcentercontent{
display: table-cell;
vertical-align: middle;
text-align: center;
}
어쩌면 당신은 이렇게 원할 수도 있습니다.
HTML
<div id="main_content">
<div id="container">vertical aligned text<br />some more text here
</div>
</div>
CSS
#main_content {
width: 500px;
height: 500px;
background: #2185C5;
display: table-cell;
text-align: center;
vertical-align: middle;
}
#container{
width: auto;
height: auto;
background: white;
display: inline-block;
padding: 10px;
}
어떻게?
테이블 셀에서 중간과 수직 정렬은 요소에 수직으로 중심을 맞추는 것으로 설정됩니다.text-align: center;요소에 대한 수평 정렬로 작동합니다.
행의 상태이므로 #container가 인라인 블록에 있는 이유를 확인했습니다.
Flexbox 디스플레이를 사용하여 디바의 중심을 쉽게 잡을 수 있는 새로운 방법이 있습니다.
작동하는 fiddle 보기: https://jsfiddle.net/5u0y5qL2/
CSS는 다음과 같습니다.
.layout-row {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
flex-direction: row;
}
.layout-align-center-center {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-grid-row-align: center;
align-items: center;
-webkit-align-content: center;
align-content: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
시도해 보십시오.position:relative;당신의#container. 정확한 너비 추가#container:
#main_content {
top: 160px;
left: 160px;
width: 800px;
min-height: 500px;
height: auto;
background-color: #2185C5;
position: relative;
}
#container {
width: 600px;
height: auto;
margin: auto;
padding: 10px;
}
해결책은 다음과 같습니다.
#main_content {
background-color: #2185C5;
height: auto;
margin: 0 auto;
min-height: 500px;
position: relative;
width: 800px;
}
#main_content {
width: 400px;
margin: 0 auto;
min-height: 300px;
height: auto;
background-color: #2185C5;
position: relative;
}
#container {
width: 50%;
height: auto;
margin: 0 auto;
background-color: #CCC;
padding: 10px;
position: relative;
}
이거 먹어봐요.테스트는 잘 되었습니다.jsfiddle에 실시간 검색이 있습니다.
다들 말했지만 다시 말하면 아프지 않을 것 같네요.
당신은 당신이 설정할 필요가 있습니다.width어느 정도 가치가여기 이해하기 쉬운 것이 있습니다.
디빈 센터를 만들기 위해서.디브의 너비를 지정할 필요가 없습니다.
작동 중인 데모는 다음과 같습니다.
.container {
width: 100%;
height: 500px;
display: table;
border: 1px solid red;
text-align: center;}
.center {
display: table-cell;
vertical-align: middle;
}
.content {
display: inline-block;
text-align: center;
border: 1px solid green;
}
<section class="container">
<div class="center">
<div class="content">
<h1>Helllo Center Text</h1>
</div>
</div>
</section>
당신의 폭이 자동으로 설정되어 있기 때문입니다.눈에 띄게 중심을 잡을 수 있도록 너비를 지정해야 합니다.
#컨테이너는 #main_content의 전체 너비에 걸쳐 있습니다.그래서 중심이 아닌 것 같습니다.
설정하면width: auto블록 요소에 대한 폭은 100%가 됩니다.그러니까, 그들이 자신들의 몸을auto여기에 가치를 둡니다.기본적으로 모든 요소가 자동 높이로 설정되어 있기 때문에 높이에 대해서도 마찬가지입니다.
그래서 마지막으로 당신의div#container실제로는 중심에 있지만 부모 요소의 전체 너비만 차지합니다.센터링을 오른쪽으로 하고, (필요한 경우) 폭만 바꾸면 정말 센터링이 되는지 확인할 수 있습니다.#main_content의 중심을 잡고 싶다면 그냥 적용하기만 하면 됩니다.margin: 0 auto;그 위에
설정하지 않고width, 최대 폭을 얻을 수 있을 겁니다그래서 당신은 그것을 볼 수 없습니다.div중심을 잡았습니다.
#container
{
width: 50%;
height: auto;
margin: auto;
padding: 10px;
position: relative;
background-color: black; /* Just to see the different */
}
CSS 콘텐츠를 이런 식으로 만드십시오...
#main_content {
top: 160px;
left: 160px;
width: auto;
min-height: 500px;
height: auto;
background-color: #2185C5;
position: relative;
}
#container {
height: auto;
width: 90%;
margin: 0 auto;
background-color: #FFF;
padding: 10px;
}
다음은 http://jsfiddle.net/golchha21/mjT7t/ 입니다.
너비를 설정하지 않으려는 경우#container, 덧셈만
text-align: center;
.#main_content.
원하는 출력일 경우 이 방법을 사용해 보십시오.
<div id="main_content" >
<div id="container">
</div>
</div>
#main_content {
background-color: #2185C5;
margin: 0 auto;
}
#container {
width: 100px;
height: auto;
margin: 0 auto;
padding: 10px;
background: red;
}
필요에 따라 "top:200px;"를 재설정해야 할 수도 있지만 이 방법은 잘 작동할 것으로 생각합니다.
#main_content {
top: 160px;
left: 160px;
width: 800px;
min-height: 500px;
height: auto;
background-color: #2185C5;
position: relative;
border: 2px solid #CCCCCC;
}
#container {
width: 100px;
height: 20px;;
margin: 0 auto;
padding-top: 10px;
position: relative;
top: 200px;
border: 2px solid #CCCCCC;
}
중심을 잡을 디브에 너비를 지정해야 합니다.
다음과 같은 경우:
#container {
width: 500;
margin: 0 auto;
padding: 10px;
}
다음 링크에 대한 자세한 정보 및 예제:
.parent {
width: 500px;
height: 200px;
border: 2px solid #000;
display: table-cell;
vertical-align: middle;
}
#kid {
width:70%; /* 70% of the parent */
margin:auto;
border:2px solid #F00;
height: 70%;
}
이렇게 하면 문제가 매우 잘 해결됩니다(모든 새 브라우저에서 tested). parent div는 class="parent"이고 child div는 id="kid"입니다.
그 스타일은 가로와 세로 모두 가운데에 있습니다.수직 중심은 복잡한 트릭을 사용하거나 HTML에서 수직 정렬을 제대로 지원하는 유일한 요소 중 하나인 테이블 셀로 부모 div를 기능하도록 해야만 수행할 수 있습니다.
아이의 키, 여백 자동, 중간 세로 정렬만 설정하면 됩니다.제가 아는 가장 쉬운 해결책입니다.
* {
box-sizing: border-box;
}
#main_content {
top: 160px;
left: 160px;
width: 800px;
min-height: 500px;
height: auto;
background-color: #2185c5;
position: relative;
}
#container {
width: 50%;
height: 50%;
margin: auto;
padding: 10px;
position: absolute;
border: 5px solid yellow;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
언급URL : https://stackoverflow.com/questions/15376634/how-can-i-center-a-div-within-another-div
'prosource' 카테고리의 다른 글
| DateTime 간의 차이.구문 분석 및 변환.현재 시간까지? (0) | 2023.10.20 |
|---|---|
| Powershell에서 사용자 지정 개체 배열을 문자열 배열로 변환 (0) | 2023.10.20 |
| Ubuntu에서 도커 + ufw의 모범 사례는 무엇입니까? (0) | 2023.10.15 |
| Woocommerce에서 Ajax Overlay Spinner 시작 및 중지 (0) | 2023.10.15 |
| C:\wamp\apps\phpmyadmin4.1.14에서 최대 실행 시간 360초를 초과했습니다. (0) | 2023.10.15 |