다른 div 내에서 div를 중앙에 어떻게 배치 할 수 있습니까? [복제]
이 질문에 이미 답변이 있습니다.
문제가 있습니다. 다음과 같은 HTML 코드가 있습니다.
<div id="main_content" >
<div id="container">
</div>
</div>
CSS는 다음과 같습니다.
#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;
}
#container가 #main_content의 중앙에 있다고 가정합니다. 그러나 그렇지 않습니다. 나는 그 이유와 그것을 중심으로 만드는 방법을 알고 싶습니다.
컨테이너의 너비를 설정해야합니다. ( 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가 부모와 동일한 너비로 확장 되기 때문입니다 .
이 바이올린을보십시오 : 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;
}
참고 : 이 답변은 BLOCK 수준 요소에만 적용됩니다! INLINE 요소를 배치하려면 text-align: center첫 번째 BLOCK 부모 의 속성 을 사용해야합니다 .
또 다른 흥미로운 방법 : 바이올린
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>
이 작은 코드로 float 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;
트릭을해야합니다.
우선 더 구체적인 너비를 정의 해 보겠습니다. 이미 전체 너비에 걸쳐있는 항목을 가운데에 맞추기가 어렵습니다.
#container {
width: 400px;
}
#container div width : 80 % [메인 콘텐츠보다 작은 너비와 %로 지정하여 왼쪽과 오른쪽 모두에서 잘 관리 됨]을 제공하고 margin : 0px auto를 제공하면 작동합니다. 또는 margin : 0 auto; [둘 다 잘 작동합니다].
여기에 해결책이 있습니다
#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에서 라이브 확인
다음과 같이 원할 수 있습니다. 데모
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가 인라인 블록 coz에있는 이유는 행 상태입니다. 다른 질문 있나요?
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;
}
작업 데모
몇 가지 프로젝트에서 다음 방법을 사용했습니다.
https://jsfiddle.net/u3Ln0hm4/
.cellcenterparent{
width: 100%;
height: 100%;
display: table;
}
.cellcentercontent{
display: table-cell;
vertical-align: middle;
text-align: center;
}
다음은 플렉스 디스플레이를 사용하여 div를 쉽게 중앙에 배치하는 새로운 방법입니다.
이 작업 바이올린을 참조하십시오 : 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;
}
너비가 자동으로 설정되어 있기 때문입니다. 가시적으로 중앙에 위치하도록 너비를 지정해야합니다. #container는 #main_content의 전체 너비에 걸쳐 있습니다. 그래서 중앙에 있지 않은 것 같습니다.
설정하지 않으면 Width얻을 수있는 최대 너비를 얻을 수 있습니다. 그래서 당신은 그것이 Div중앙에 있는 것을 볼 수 없습니다 .
#container
{
width: 50%;
height: auto;
margin: auto;
padding: 10px;
position: relative;
background-color:black; /* Just to see the different*/
}
margin:0 auto;자식 div에 사용 합니다. 그런 다음 하위 div를 상위 div 내부에 배치 할 수 있습니다.
모두가 말했지만 다시는 아프지 않을 것 같아요. width을 어떤 값 으로 설정해야 합니다. 여기에 더 이해하기 쉬운 것이 있습니다.
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
width: auto블록 요소로 설정 하면 너비는 100 %가됩니다. 그래서 auto여기에 있는 가치 는 그다지 말이되지 않습니다 . 기본적으로 모든 요소가 자동 높이로 설정되어 있기 때문에 높이에 대해서도 동일합니다.
So finally your div#container is actually centered but it just occupy the whole width of its parent element. You do the centering right, you need just to change the width (if needed) to see that it is really centered. If you want to center your #main_content then just apply margin: 0 auto; on it.
try this one if this is the output you want:
<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;
}
This will work fine i think though you might need to reset "top:200px;" according to your need--
#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;
}
You must assign a width to the div you want to center.
Like This:
#container {
width: 500;
margin: 0 auto;
padding: 10px;
}
More information and examples on these links:
http://www.w3schools.com/css/css_align.asp
http://www.w3schools.com/css/tryit.asp?filename=trycss_align_container
.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%;
}
This does solve the problem very well (tested in all new browsers), where the parent div has class="parent" and the child div has id="kid"
That style centers both horizontally and vertically. Vertical center can only be done using complicated tricks--or by making the parent div function as a table-cell, which is one of the only elements in HTML that properly supports vertical alignment. Simply set the height of the kid, margin auto, and middle vertical alignment, and it will work. It's the easiest solution that I know.
to make a div in center. no need to assign width of the div.
working demo Here..
.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>
* {
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
'Programming' 카테고리의 다른 글
| 웹 사이트를위한 단순 / 최소한 browserconfig.xml은 무엇입니까? (0) | 2020.08.09 |
|---|---|
| 목록의 각 요소에 정수를 추가하는 방법은 무엇입니까? (0) | 2020.08.09 |
| Ruby 지원 (+ ruby)으로 vim 설치 (0) | 2020.08.09 |
| Visual Studio 2013에서 Git 통합을 영구적으로 비활성화하려면 어떻게해야합니까? (0) | 2020.08.09 |
| 자식 요소를 변경하지 않고 요소의 텍스트를 어떻게 변경할 수 있습니까? (0) | 2020.08.09 |