오른쪽으로 떠있는 것과 왼쪽으로 떠있는 것 사이에 div를 중앙에 배치
헤더가 세 개의 div로 구성된 페이지가 있습니다. 하나는 왼쪽으로, 하나는 오른쪽으로, 다른 하나는 그 사이에 있습니다. 중앙 div가 중앙에 배치되기를 원하지만 슬프게도 float: center존재하지 않으며 창 크기에 따라 변경해야하므로 왼쪽으로 플로팅하고 패딩을 추가 할 수 없습니다.
내가 간과하는 간단한 것이 있습니까? 아니면 어떻게 그런 일을할까요?
업데이트 :
또한 더 좋아 보이는 경우 중간 div를 div 사이의 공간에 중앙에 배치하는 방법을 찾고 싶습니다 .
두 개의 부동 div가 있으면 여백을 알고 있습니다. 문제는 float:rightdiv가 중간 div 앞에 있어야한다는 것입니다. 따라서 기본적으로 다음을 갖게됩니다.
왼쪽 부동 | 오른쪽 부동 | 중심
이제 여백에 대해 : 일반적으로 그냥 사용할 수 있습니다 margin:0 auto. 문제는 이제 여백의 값을 알고 있다는 것입니다 : floated divs! 따라서 다음을 사용해야합니다.
margin:0 right-floated-width 0 left-floated-width
작동합니다.
몇 년 후 편집
한편, 새로운 장난감 인 플렉스 박스가 등장합니다. 지원은 상당히 좋으며 (즉, IE 10보다 낮은 수준을 지원할 필요가없는 경우) 사용 편의성은 플로트보다 훨씬 쉽습니다.
여기 에서 아주 좋은 flexbox 가이드를 볼 수 있습니다 . 필요한 예는 바로 여기에 있습니다 .
실제로 중요한 부분은 중앙 div가 마크 업에서 왼쪽 및 오른쪽 div 뒤에 온다는 것 입니다. 이 사용이 예제를 확인 margin-left: auto하고 margin-right: auto그것을 중심으로하는 원인을 중심으로 사업부에.
<html>
<head>
<style type="text/css">
#left
{
float: left;
border: solid 1px red;
}
#mid
{
margin-left: auto;
margin-right: auto;
border: solid 1px red;
}
#right
{
float: right;
border: solid 1px red;
}
</style>
</head>
<body>
<div id="left">
left
</div>
<div id="right">
right
</div>
<div id="mid">
mid
</div>
</body>
</html>
테스트 할 JS Bin은 다음과 같습니다. http://jsbin.com/agewes/1/edit
일반적으로 float 대신 flexbox를 사용할 수 있습니다.
https://jsfiddle.net/h0zaf4Lp/
HTML :
<div class="container">
<div>left</div>
<div class="center">center</div>
<div>right</div>
</div>
CSS :
.container {
display: flex;
}
.center {
flex-grow: 1;
}
가운데 콘텐츠가있는 요소는 두 플로팅 요소 뒤에 지정해야합니다 . 그런 다음 중간 요소를 text-align: center. 가운데에있는 요소의 텍스트는 부동 소수점 사이에 꽉 끼게됩니다.
여기를 참조하십시오 : http://jsfiddle.net/calvintennant/wjjeR/
이것을 시도하십시오 (더 나은 클래스 이름을 사용하십시오) :
.left {
float:left;
width:200px;
}
.right{
float:right;
width:200px;
}
.center {
overflow:hidden;
zoom:1;
}
The center div will fit between the two floats.
If you want to create a gutter between that centered div and the two floats, then use margin on the floats, not on the center div.
Because of "zoom", the CSS will not validate, but that layout will work in IE 5.5 and 6.
Note that source order is important here: the two floats must come first, then your "centered" div.
In some cases, you have a limitation and cannot change the page markup by moving the middle div after the right-floated div. In that case, follow these instructions:
- For container:
position: relative - For middle div:
position: absolute; left: [containerWidth - middle-width / 2]
I hope you got the idea.
A simple solution without having to change the order of the divs (sometimes we can not do this) could be an absolute positioning for the center div as follows:
.container {
position: relative;
}
.container div {
width: 200px;
background: red;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>ReferenceURL : https://stackoverflow.com/questions/3172738/centering-a-div-between-one-thats-floated-right-and-one-thats-floated-left
'development' 카테고리의 다른 글
| 대기열을 사용하는 생산자 / 소비자 스레드 (0) | 2020.12.29 |
|---|---|
| 기본 클래스에서 공개적으로 상속하지만 파생 클래스에서 기본 클래스의 일부 공용 메서드를 개인으로 만드는 방법은 무엇입니까? (0) | 2020.12.29 |
| 디렉터리 및 하위 디렉터리의 모든 파일을 시간 역순으로 나열하려면 어떻게합니까? (0) | 2020.12.28 |
| Ajax 호출에서 세션 시간 초과 처리 (0) | 2020.12.28 |
| iOS의 키 체인에 이메일 / 비밀번호 저장 (0) | 2020.12.28 |